Many editor can wrap a line that reaches the window width and show an indicator in the margin, for example, Emacs.
I want to add such line wrap indicators to the code block in HTML. It is easy
to add indicators as background image in CSS. But the indicators should
only be shown when the line is wrapped. And from the figure, the wrap
indicator is not displayed on the last line in the right margin, and not on
the first line in the left margin. There’s a
:first-line pseudo element
selector, there’s no
:last-line. However, it can be achieved by using
:after with position trick.
You can check the result in this jsfiddle: http://jsfiddle.net/fbDKQ/6/ . Resize the result panel to see the line wrap indicators. Following is a detailed explanation.