使用 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 中是不可能的。我怀疑你也许可以使用附在右下角的高而薄的图形来伪造它，底部没有字形，然后字形继续向上直到你最高的合理连续，字形间距仔细协调到你的线-高度。