CSS行尾选择器添加装饰

Question

让我们说一句很长的文字

并且您想以响应方式（例如，针对所有屏幕尺寸）在每个换行符之前添加一些内容。

在此处输入密码：https://codepen.io/jossnaz/pen/YgWmrR

看起来像这样：

我想使它看起来像这样：

例如：在每行末尾添加一个插入符_

HTML

<span>
  long long text long long text text  long long text long long text text long long text long long text text long long text long long text text 
</span>

<br>
<br>
<br>
<br>

<span>
  long long text long long text text  long long text long long text text long long text long long text text long long text long long text text 
</span>

CSS

span{
  max-width: 350px;
  display: inline-block;
}

br + span{
  max-width: 500px;
}

Answer 1

这是一个使用背景和box-decoration-break的想法。

p {
  max-width: 300px;
}

p>span {
  background: linear-gradient(#000, #000) right bottom/8px 1px no-repeat;
  padding-right: 10px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus lectus, gravida in gravida non, consequat in ipsum. Aenean molestie dictum sem sed ornare. Aenean eleifend massa nunc, ut mollis mi bibendum quis. Ut at lorem lorem. Ut nisl est, scelerisque a augue at, fringilla tincidunt urna</span></p>

<p><span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc purus lectus, gravida in gravida non, consequat in ipsum. Aenean molestie dictum sem sed ornare. Aenean eleifend massa nunc,</span></p>