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) 
    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>