0

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

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

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

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

谢谢 ：）

4

7 回答 7

8

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

这是结构（为了清楚起见，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——与最后一个短的底部边框重叠并完成了错觉。

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

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

于 2012-12-06T17:27:25.470 回答
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>
于 2011-04-04T17:28:37.800 回答
2

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

于 2011-04-04T17:26:38.900 回答
1

也许我错过了重点，但你能不能

<u> my text here </u>
于 2011-04-04T17:28:31.003 回答
0

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

div{text-decoration:underline}

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

<div style='text-decoration:underline'>
于 2011-04-04T17:28:44.700 回答
0

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

于 2011-04-04T17:30:06.900 回答
0

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

问题：

下划线文本-a-padded-link-tag-problem.png

解决方案：

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

下划线文本-a-padded-link-tag-solution.png

于 2015-04-04T04:34:52.217 回答