使用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   */ }

该演示呈现为（默认为黑色，红色为“视觉指示”）：