Question

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 …

Answer 1

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"):