时间戳

首页 > 解决方案 > 使用 CSS 为每个新行添加前缀字符

html - 使用 CSS 为每个新行添加前缀字符

问题描述

我正在寻找一种仅使用 CSS 为每行文本添加前缀的方法。前缀目前是用:beforeselector做的，不知道能不能扩展成多行。对于第一行，前缀是星号*，对于以下行，前缀是 pipe |。

这是我要实现的目标的表示：

* Duo laudem labore interpretaris ne, maiorum qualisque interpretaris mel id. Quo
| enim propriae eu, denique molestie definiebas mel no. Solum integre mandamus his
| ne, sale hendrerit pro ut, ei has libris habemus delicatissimi. Eu eum illud.

相同的文字但不同的宽度：

* Duo laudem labore interpretaris ne, maiorum 
| qualisque interpretaris mel id. Quo enim
| propriae eu, denique molestie definiebas mel 
| no. Solum integre mandamus his ne, sale
| hendrerit pro ut, ei has libris habemus 
| delicatissimi. Eu eum illud.

请注意，文本块的宽度是可变的，这就是使块的行数增加的原因。

是否有任何CSS 唯一的解决方案来解决这个问题？

标签： htmlcsscss-selectors

解决方案

除非您有数十万行，否则您可以使用内容为|\a(|和\a换行符) 的伪元素，只需尽可能多地添加它们。

p {
  position: relative;
  padding-left: 1em;
  overflow: hidden;
  width: 100px;
}

p:before {
  content: "*";
  position: absolute;
  left: 0;
  top: 0;
}

p:after {
  content: "|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a";
  white-space: pre;
  position: absolute;
  left: 0;
  top: 1em;
}
<p>Duo laudem labore interpretaris ne, maiorum qualisque interpretaris mel id. Quo enim propriae eu, denique molestie definiebas mel no. Solum integre mandamus his ne, sale hendrerit pro ut, ei has libris habemus delicatissimi. Eu eum illud.</p>

而且，当然你也可以只用一个伪元素来做到这一点。

p {
  position: relative;
  padding-left: 1em;
  overflow: hidden;
  width: 100px;
}

p:before {
  content: "*\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a|\a";
  white-space: pre;
  position: absolute;
  left: 0;
  top: 0;
}
<p>Duo laudem labore interpretaris ne, maiorum qualisque interpretaris mel id. Quo enim propriae eu, denique molestie definiebas mel no. Solum integre mandamus his ne, sale hendrerit pro ut, ei has libris habemus delicatissimi. Eu eum illud.</p>

推荐阅读