如何在每一行文本下划线到块的末尾答案

【问题标题】：How to underline every line of text, to the end of a block如何在每一行文本下划线到块的末尾
【发布时间】：2011-04-04 17:24:32
【问题描述】：

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

我希望我的布局看起来像一行字

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

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

谢谢:)

【问题讨论】：

放入带线条的背景图像并调整文本的行高以匹配？您不能使用常规下划线，因为它会在文本使用时停止。
是的，我考虑过 background-image，但它是用于时事通讯的，大多数电子邮件客户端 (outlook) 不使用此属性。

标签： css block newsletter underline

【解决方案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，因为我们的块样式#span1 的下边距为-1px，与最后一个短下边框重叠并完成了错觉。

是的，有点杂乱无章，但是当涉及到线路并且无法调整客户的要求时，有时您需要杂乱无章。

（注意：我不希望这适用于电子邮件格式...就像我之前所说的那样，我需要它来模仿打印页面上的横格纸外观。）

【讨论】：

这完全是邪恶的。但它工作，我正在使用它。非常感谢。

【解决方案2】：

除非我弄错了，否则你想要这样的东西：

http://jsfiddle.net/eB6tY/

CSS：

#postcard .line
{
    width: 100%;
    border-bottom: 1px solid #000;
}

HTML：

<div id="postcard">
    <div class="line">Line 1</div>
    <div class="line">Line 2</div>
    <div class="line">Line 3</div>
</div>

【讨论】：

【解决方案3】：

在您需要下划线的行中添加 style="border-bottom: 1px solid #000"（可能在您包含的 td 上）

【讨论】：

这行不通，因为文本一停就停。

【解决方案4】：

也许我没有抓住重点，但你不能这样做

<u> my text here </u>

【讨论】：

我认为 OP 想模拟你在学校使用的经典横线便笺纸，这意味着即使没有要下划线的文字也是线条。
我认为但是句子的长度并不重要..所以，我认为我提供它以防万一 - 但正如我所说，我可能错过了重点:)

【解决方案5】：

假设 DIV 作为您的相关选择器

div{text-decoration:underline}

如果您要通过电子邮件发送此邮件，则为内联...

<div style='text-decoration:underline'>

【讨论】：

【解决方案6】：

您可以使用具有一行文本高度（加上底部边距）和 1 像素宽度的背景图像。内容将是“透明加一个点表示该行应该去的地方”...

【讨论】：

【解决方案7】：

这出现在我的搜索中，因此我将发布我的问题的解决方案。我需要在一个a 标签下划线，该标签在行尾有填充；问题是下划线将从元素的开头而不是文本开始。

问题：

解决方案：

menu .heading a {
    color: #414142 ;
}
.menu .heading a:after {
    /* to get a nice underline that starts at padding-left offset */
    border-bottom: 2px solid #414142;
    content: '';
    display: block;
    position: relative;
    bottom: -0.5em;
}

【讨论】：