css - 如何在每一行文本下划线，直到 block 的末尾

Question

所以，这是我的问题，我正在为客户制作一份时事通讯，它看起来像一张明信片。

我希望我的布局看起来像在行上书写

任何人都可以帮助我实现我想要做的事情吗？ 将我的文本放在 TD 标签中不起作用，因为我不知道每个句子的长度。

如果您需要更多信息，请告诉我!

谢谢 :)

Answer 1

我刚遇到这个问题，客户“需要”在打印输出上有一个注释部分，用户输入的注释文本带有下划线，就像在螺旋装订纸上一样。 (我学会了停止问为什么。)为什么我不使用背景图片？它不会打印出来，所以不是一个选项。

结构如下(ID 为清楚起见):

<p id = "p">
    <span id = "span1">
        <span id = "span2">
            sadfa sdfhkas dfjkahsd fhjklasdg f askjldfh jklas djklfh aljks hfjkl hasjdklfg hjlashdjlfgh jlkashdjkl gfhloashdfgh jkladshjkgl haskl dhfiu hajkl fghuasbhfljbahuk bfkljabwehrf bajkls bflaskdjf ljakdfk
        </span>
    </span>
</p>

应用了以下样式:

#p {
    border-bottom: 1px solid black;
    text-align: justify;
}
#span1 {
    display: block;
    margin-bottom: -1px;
}
#span2 {
    border-bottom: 1px solid black;
}

让我们从这里开始......

#span2 被赋予底部边框，以创建大量的横格纸外观。然而，如果我们停在这里，就会遇到一个问题:线条没有一直延伸到右边距，如前所述。我们稍后会讨论这个问题。

#span1，包装#span2，是解决这个太短线问题的 50%。我给了它 block 的显示属性，这将允许我应用 -1px 底部边距，有效地用 #span1 的底部边缘“覆盖”#span2 的最后一个悬垂线。在我们到达……之前，这种效果没有多大值(value)。

#p 在这里，我们应用到#span1 的样式得到了返回。首先，我们有 text-align: justify 处理大部分到达右边距的底部边界线，当然最后一行除外，它现在看起来真的不合适。为了解决这个问题，我们将 border-bottom: 1px solid black 应用到 #p ，因为我们的 block 样式 的底部边距为 -1px #span1 -- 与最后一个短的底部边框重叠并完成幻觉。

是的，这有点笨拙，但当涉及到线路并且无法调整客户的需求时，有时您需要的就是笨拙。

(注意:我不希望这适用于电子邮件格式......就像我之前说的，这是我在打印页面上模仿横格纸外观所需要的东西。)