CSS显示行包裹的指示符

问题描述 投票：2回答：3

是否有可能在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';
html css
3个回答
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的最大数量。

最后结果

enter image description here

0
投票

就纯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>
0
投票

这就是我最终这样做的方式，但它只能起作用，因为原始文本和HTML之间有一个解释器。最初，解释器在文本之前放置<pre>，在文本之后放置</ pre>。我将其更改为在每行前面放置<pre>，并在每行的末尾放置\ n </ pre>（\ 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因为它重复上下两个方向。最终结果对我来说很好看。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.