当前位置：文江博客话题详情

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

发布于 2024-10-30 14:07:42 字数 170 浏览 2 评论 0原文

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

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

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

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

谢谢：）

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

围归者 2024-11-06 14:07:42

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

结构如下（为了清晰起见，使用 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 的最后一个悬垂线。在我们达到...

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

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

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

I just ran into this issue where a client "needed" to have a notes section on a print-out with user-entered note text underlined as if on spiral-bound paper. (I've learned to stop asking why.) Why didn't I use a background image? It won't print out, so not an option.

Here's the structure (IDs for clarity):

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

The following styles are applied:

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

Let's start from the inside here...

#span2 is given a bottom border in order to create the bulk of the lined-paper look. If we stop here, however, we have a problem: The lines don't extend all the way to the right margin, as has been mentioned previously. This issue we'll get to in a moment.

#span1, wrapping #span2, is 50% of the solution to this too-short line problem. I've given it a display property of block, which will allow me to apply a -1px bottom margin, effectively "covering up" the last overhanging line of #span2 with the bottom edge of #span1. The effect of this isn't worth much until we get to...

#p Here the styles we've applied to #span1 pay off. First, we have text-align: justify which takes care of most of the bottom-border lines reaching the right margin, save of course for the last line, which now looks really out of place. To take care of this, we apply border-bottom: 1px solid black to #p which -- because of the -1px bottom margin on our block-styled #span1 -- overlaps the last, short bottom border and completes the illusion.

Yes, it's sort of kludgy, but when it comes down to the wire and the client's demands can't be adjusted, sometimes a kludge is what you need.

(Note: I wouldn't expect this to work for email formatting... Like I said before, it's something I needed for mimicking that lined-paper look on a printed page.)

回复收藏 0 原文

思念绕指尖 2024-11-06 14:07:42

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

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>

Unless I am mistaken, you want something like this:

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>

回复收藏 0 原文

冷心人i 2024-11-06 14:07:42

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

回复收藏 0 原文

黯淡〆 2024-11-06 14:07:42

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

<u> my text here </u>

Maybe Im missing the point but could you not do

<u> my text here </u>

回复收藏 0 原文

删除会话 2024-11-06 14:07:42

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

div{text-decoration:underline}

或内联选择器（如果您通过电子邮件发送此内容）...

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

assuming DIV as your relevant selector

div{text-decoration:underline}

or inline if you are emailing this...

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

回复收藏 0 原文

落墨 2024-11-06 14:07:42

您可以使用高度为一行文本（加上 margin-bottom）且宽度为 1 像素的背景图像。内容将是“透明的，并在该线所在的位置加一个点”......

回复收藏 0 原文

热风软妹 2024-11-06 14:07:42

这是我的搜索中出现的，所以我将发布我的问题的解决方案。我需要在 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;
}

This came up in my search so I will post my solution to my problem. I needed to underline an a tag that had padding to the end of line that; problem was the underline would start at begining of the element and not the text.

Problem:

Solution:

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

回复收藏 0 原文

~没有更多了~