使用CSS突出显示包装线

Question

CSS（3）是否可以在视觉上/文本上突出显示由浏览器自动插入的换行符？在每条包裹线的末尾有类似↻的东西。

使用源代码，重要的是要查看换行的位置，因为换行可能很重要。让用户水平滚动不是一个好主意......

Answer 1

据我所知，只有通过:first-line伪元素

使用纯CSS才能做到这一点

  

<强>概念
  默认情况下，为每个元素添加“视觉指示”   选择每个: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中是不可能的。我怀疑你可以使用附在右下角的高瘦图形伪造它，底部没有字形，然后字形继续向上到最高的合理连续，字形间距与你的线仔细协调 - 高度。