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

标签： css

Answer 1

这是一个使用背景和box-decoration-break.

p {
  max-width: 300px;
}

p > span {
  background: 
    linear-gradient(#000, #000) 
    bottom right/
    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>