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有一个底部边框，以创建大量的衬纸外观。但是，如果我们停在这里，我们就会遇到一个问题：如前所述，线条并没有一直延伸到右边距。我们马上就会遇到这个问题。

包装＃span2的

#span1是这个太短线问题解决方案的50％。我已经给它一个块的显示属性，这将允许我应用-1px底部边距，有效地“掩盖”{span}的下边缘#span2的最后悬垂线。在我们到达之前，这种效果并不值得......

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

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

（注意：我不希望这适用于电子邮件格式化...就像我之前说过的那样，这是我在印刷页面上模仿这种带衬纸外观所需要的东西。）

Answer 2

在您的行中需要加下划线添加一个style =“border-bottom：1px solid＃000”（可能在您的包含td上）

Answer 3

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

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>

Answer 4

也许我错过了这一点，但你能否做到

<u> my text here </u>

Answer 5

假设DIV为您的相关选择器

div{text-decoration:underline}

或内联，如果您通过电子邮件发送...

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

Answer 6

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

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

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

7 个答案: