CSS（3）是否可以在视觉上/文本上突出显示由浏览器自动插入的换行符？在每一行的末尾添加↻。使用源代码时，查看行的换行位置是很重要的，因为换行符可能很重要。让用户水平滚动也不是一个好主意。
↻
nzkunb0c1#
据我所知，只有通过:first-line伪元素使用纯CSS来实现这一点
:first-line
理念
默认情况下，为每个元素添加“视觉指示”。选择每个:first-line元素，重置样式。
<code><div class="line">Too much code at one line. Learn to write shorter lines!</div><div class="line">Lonely line.</div>...</code>
<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 */ }
code {display: block; width: 150px;} /* <-- Not interesting, just for testing*/
code .line { color: red; /* Visual indication */ }
code .line:first-line { color: #000; /* Default color */ }
型演示呈现为（默认情况下为黑色，红色表示“视觉指示”）：
的数据
56lgkhnf2#
可悲的是，这在纯CSS中是不可能的。我怀疑你可以使用一个高瘦的图形附加到右下角，底部没有符号，然后字形继续上升到你最高的合理运行，符号间距仔细协调到你的行高。
2条答案
按热度按时间nzkunb0c1#
据我所知，只有通过
:first-line伪元素使用纯CSS来实现这一点理念
默认情况下，为每个元素添加“视觉指示”。
选择每个
:first-line元素，重置样式。示例：http://jsfiddle.net/djpTw/
字符串
CSS：
型
演示呈现为（默认情况下为黑色，红色表示“视觉指示”）：
的数据
56lgkhnf2#
可悲的是，这在纯CSS中是不可能的。我怀疑你可以使用一个高瘦的图形附加到右下角，底部没有符号，然后字形继续上升到你最高的合理运行，符号间距仔细协调到你的行高。