Highlight wrapped lines with CSS

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 neither …

I don't think this is possible using pure CSS - a similiar questions gives methods using JS though: http://stackoverflow.com/questions/4671713/detecting-line-breaks-with-jquery — Karl Barker, Feb 26 '12 at 16:36
Sounds like a good pseudo-element to add to Text level 4 if you ask me. — BoltClock, Feb 26 '12 at 16:57

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

3

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

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 26 '12 at 17:27

Rob W

341,306
83
791
678

1

The `.line` elements will have to be added on the fly as the code block is parsed for this to be effective (which is done by a handful of syntax-highlighting libraries out there). Additionally, you cannot use `:before` or `:after` with other pseudo-elements to add line-wrapping symbols such as the one suggested in the question. – BoltClock Feb 26 '12 at 17:31
@BoltClock That's true. I can't think of any other pure-CSS solution to mark text based on newlines. Do you? – Rob W Feb 26 '12 at 17:37

score 0 · Answer 2 · answered Feb 26 '12 at 17:19

Sadly, this is not possible in pure CSS. I suspect you might be able to fake it using a tall thin graphic attached to the bottom right with no glyph in the bottom and then glyphs proceeding up as far as your tallest reasonable run-on, with the glyph spacing carefully coordinated to your line-height.

Highlight wrapped lines with CSS

2 Answers2

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