Search code examples
htmlcssword-wrap

Highlight wrapped lines with CSS

Is it possible with CSS(3) to visually/textually highlight line breaks, which were automatically inserted by browsers? Something like ↻ at the end of each wrapped line.

With sourcecode it's important to see where lines were wrapped, since newlines can be significant. Letting the user scroll horizontally isn't a good idea either …

Solution

  • As far as I know, there is only way to do this using pure CSS, via the :first-line pseudo-element

    Concept
    Add a "visual indication" to every element, by default.
    Select every :first-line element, to reset the styles.

    Demo: http://jsfiddle.net/djpTw/

    <code>
<div class="line">Too much code at one line. Learn to write shorter lines!</div>
<div class="line">Lonely line.</div>
...
</code>

    CSS:

    code {display: block; width: 150px;} /* <-- Not interesting, just for testing*/
code .line            {  color: red;  /* Visual indication */ }
code .line:first-line {  color: #000; /* Default color   */ }

    The demo is rendered as (black by default, red as "visual indication"):