CSS显示指示器，该行换行了 [英] CSS show indicator that line wrapped
问题描述
在CSS中是否有可能显示出换行的指示.例如，我在"pre"块中包含以下内容:
Is it possible in CSS to show an indication that a line wrapped. For example, I have the the following in a "pre" block:
<html><body>Hello World</body></html>
我将空格设置为预换行，因此不会引起左右滚动问题.它工作正常.它显示如下内容:
I set white-space to pre-wrap so it won't cause left-right scroll issues. It works fine. It shows up something like:
<html><body>Hello World</body>
</html>
但是，我想表明行已结束.像这样:
But, I want some indication that the line wrapped. Something like:
<html><body>Hello World</body>
| </html>
然后，我可以告诉读者表示换行.因此，请将其视为一行文本.如果它在换行很糟糕的地方中断，例如:
Then, I can tell the reader that the | means the line wrapped. So, treat it as a single line of text. This will also be very useful if it breaks in the middle of something where a line wrap is terrible, such as:
form.getSubmit().style.background
Color = 'green';
推荐答案
这就是我这样做的最终结果，但是它只能工作，因为原始文本和HTML之间存在解释器.最初，解释器将< pre>放在文字和</pre>之前的内容文字之后.我将其更改为放置< pre>每行之前和\ n</pre>在每行的末尾(\ n是用于强制换行的换行符).然后，我制作了一个称为grey.png的1像素灰度图像.这样，我做到了:
This is how I ended up doing this, but it only works because there is an interpreter between the original text and the HTML. Originally, the interpreter placed <pre> before the text and </pre> after the text. I altered it to place <pre> before each line and \n</pre> at the end of each line (the \n is a newline character to force a line break). Then, I make a 1 pixel gray image called gray.png. With that, I did:
pre {
white-space:pre-wrap;
padding-left:1em;
text-indent:-1em;
background-image:url(gray.png);
background-repeat:no-repeat;
background-position:0px 1.5em;
background-size:1em 100em;
}
现在，对于普通行，填充和文本缩进可以互相抵消.文本显示在正常位置.文字换行时，由于填充而使文字缩进.同样，背景图像显示在左侧.它的高度为100em，因此会跨越许多行.我不能使用repeat-y，因为它会重复上下两个方向.最终结果对我来说很好.
Now, for a normal line, the padding and text-indent cancel each other out. The text shows up in the normal position. When the text wraps, the text is indented due to the padding. Also, the background image shows up on the left. It is 100em tall, so it will span many lines. I couldn't use repeat-y because that repeats both directions, up and down. The end result looks nice to me.
这篇关于CSS显示指示器，该行换行了的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
