Question

CSS中是否可以显示包裹线的指示。例如，我在“pre”块中有以下内容：

<html><body>Hello World</body></html>

我将白色空间设置为预先包装，因此不会导致左右滚动问题。它工作正常。它显示了类似的东西：

<html><body>Hello World</body>
</html>

但是，我想要一些迹象表明这条线被包裹了。类似的东西：

<html><body>Hello World</body>
| </html>

然后，我可以告诉读者那个|表示包裹的线。因此，将其视为单行文本。如果它在线条包裹很糟糕的东西中断，例如：

，这也将非常有用

form.getSubmit().style.background
Color = 'green';

Answer 1

试着想象一下：如果你的代码片段中有最多行数，你可以使用伪元素：

Codepen demo

<强>标记

<pre>&lt;html>
   &lt;body>
       Hello World
   &lt;/body>
&lt;/html&gt;
</pre>

<强> CSS

pre {
  background: yellowgreen;
  color: #fff;
  line-height: 1.5;
  font-size: 1.3rem;
  overflow: hidden;
  margin: 30px;
  border: 15px yellowgreen solid;
  position: relative;
  padding-left: 1.25em;
  text-indent: -1.25em;
}

pre:before {
  position: absolute;
  z-index: 1;
  line-height: inherit;
  font-size: inherit;
  color: #424242;
  content: "\A\2424\A\2424\A\2424..." /* Ad libitum */
}

作为换行符号，我使用了unicode U+2424（␤）SYMBOL FOR NEWLINE但当然你可以从unicode表中选择另一个

由于应用了pre:before（第一行的内容为padding-left），我们的想法是使用第二行显示的text-indent（内容以换行符开头）。

这将有效，直到您在\A\2424属性中定义了多个content对，至少等于LOC的最大数量。

最终结果

Answer 2

就纯CSS而言，您可以查看::first-line以不同方式为文本着色（或任何其他与字体相关的属性），但这仅适用于第一行，在我的提案中，这意味着你必须为每行内容制作一个新的<pre>块，这对解决方案来说不是很灵活。

body {
  margin: 0;
}

pre {
  width: 250px;
  white-space: pre-wrap;
  background: aliceblue;
  
  /* Below styles the second+ line */
  color: red;
}

pre::first-line { /* Styles the first line */
  color: green;
}

<pre>
&lt;html&gt;&lt;body&gt;Hello World&lt;/body&gt;&lt;/html&gt;
</pre>

Answer 3

这就是我最终这样做的方式，但它只能起作用，因为原始文本和HTML之间有一个解释器。最初，口译员放置＆lt; pre＆gt;在文本和＆lt; / pre＆gt;之前在文本之后。我将其改为放置＆lt; pre＆gt;在每一行之前和\ n＆lt; / pre＆gt;在每一行的末尾（\ n是强制换行符的换行符）。然后，我制作一个名为gray.png的1像素灰度图像。有了这个，我做了：

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;
}

现在，对于法线，填充和文本缩进相互抵消。文本显示在正常位置。文本换行时，文本由于填充而缩进。此外，背景图像显示在左侧。它是100米高，所以它将跨越许多线。我不能使用repeat-y因为它重复上下两个方向。最终结果对我来说很好看。

CSS显示行包裹的指示符

3 个答案: