Выделите обернутые линии с помощью CSS

Question

Возможно ли с помощью CSS (3) визуально / текстово выделить разрывы строк, которые были автоматически вставлены браузерами? Что-то вроде ↻ в конце каждой завернутой строки.

При использовании исходного кода важно видеть, где были перенесены строки, поскольку переводы строк могут быть значительными. Позволить пользователю прокручивать по горизонтали тоже не очень хорошая идея ...

Answer 1

Насколько я знаю, есть только способ сделать это, используя чистый CSS, через :first-line псевдоэлемент

Концепция
По умолчанию добавьте «визуальную индикацию» к каждому элементу.
Выберите каждый элемент :first-line, чтобы сбросить стили.

Демо: 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   */ }

Демонстрация отображается как (черный по умолчанию, красный как «визуальная индикация»):

Answer 2

К сожалению, это невозможно в чистом CSS.Я подозреваю, что вы могли бы подделать его, используя высокую тонкую графику, прикрепленную к правому нижнему углу без глифа внизу, а затем глифы, доходящие до самого высокого разумного разбега, с интервалом глифов, тщательно скоординированным с вашей линией.высота.