代码之家 › 专栏 › 技术社区 › a--m

使用CSS为每一行添加一个前缀字符

css-selectors css3 css html

0

a--m · 技术社区 · 6 年前

我在寻找一种只使用CSS为每行文本添加前缀的方法。前缀当前已完成 :before * |

* 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

2 回复 | 直到 6 年前

1

4

Stickers 6 年前

除非有成千上万行,否则可以使用内容为的伪元素 |\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>两个劳登劳动解释,主要质量解释mel id.enim propriae eu,denique molestie definiebas mel no.Solum integre mandamus his ne,sale hendrerit PROUT,ei HABRIS habemus DELICATISIMI。欧盟eum illud。</p>

2

3

Temani Afif 6 年前

你可以用渐变的方式来视觉化。诀窍是考虑 line-height |

.box {
  padding-left:20px;
  font-size:25px;
  line-height:1.2em; /*This is used in the gradient so it should match*/
  background:
   repeating-linear-gradient(to bottom,
   transparent 0px, transparent 5px,
   #000 5px,#000 calc(1.2em - 2px),
   transparent calc(1.2em - 2px),transparent 1.2em) 
  4px 0/2px 100% 
  no-repeat;
}

<div class="box"> 
| Lorem ipsum dolor sit amet, consectetur adipiscing lorem | Proin pharetra felis eu arcu imperdiet, ac ultricies velit scelerisque. Curabitur mollis purus at dignissim pharetra. Donec in tortor in sapien vulputate pretium at eget risus. Fusce elementum ex ut eleifend accumsan. Aliquam dapibus eleifend malesuada. Vivamus ac mattis sapien, vitae interdum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>

.box {
  padding-left:20px;
  font-size:25px;
  line-height:1.2em; /*This is used in the gradient so it should match*/
  background:
   repeating-linear-gradient(to bottom,
   transparent 0px, transparent 5px,
   #000 5px,#000 calc(1.2em - 2px),
   transparent calc(1.2em - 2px),transparent 1.2em) 
  4px 1.2em/2px 100% 
  no-repeat;;
}

.box:before {
  content:"*";
  margin-left:-20px;
  display:inline-block;
}

<div class="box"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin pharetra felis eu arcu imperdiet, ac ultricies velit scelerisque. Curabitur mollis purus at dignissim pharetra. Donec in tortor in sapien vulputate pretium at eget risus. Fusce elementum ex ut eleifend accumsan. Aliquam dapibus eleifend malesuada. Vivamus ac mattis sapien, vitae interdum lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>