如何为每行文本加下划线,到块的末尾

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%.我已经给它一个块的显示属性,这将允许我应用-1px底部边距,有效地"覆盖" #span2#span1的下边缘的最后悬垂线.在我们到达之前,这种效果并不值得...

#p这里我们应用于#span1的样式得到了回报.首先,我们text-align: justify处理了大部分底边线到达右边缘,当然除了最后一条线,现在看起来真的不合适.为了照顾这一点,我们应用border-bottom: 1px solid black到#p其中-因为我们的块风格的-1px底部边缘的#span1重叠最后,短期底部边框并完成错觉-

是的,它有点像kludgy,但当它归结为电线并且客户的需求无法调整时,有时候你需要一个kludge.

(注意:我不希望这对于电子邮件格式化有用...就像我之前说过的那样,这是我在印刷页面上模仿衬纸外观所需的东西.)