高级CSS挑战：仅使用CSS下划线的文本的最后一行 [英] Advanced CSS challenge: underline only the final line of text with CSS
问题描述
我想加下划线的多行文本的最后一行，或至少创建它的暗示。仔细看下面的例子，因为我想做一些棘手的事情。
A。这里是我想要发生的事情（ __ 文本应带下划线）：
一行足够长的文本，以便将
包装到另一行。
________________
B ：
一行足够长的文本，以便将
___________________________________________________
包装到另一行。
________________
C。
一行足够长的文本，以便将
换行到另一行。
___________________________________________________
此效果适用于CMS，因此我不知道文本。这意味着手动插入< span> s或< u> 标记不是一个选项。我也不想用户javascript。我很清楚，我想要的效果不是默认行为，这将需要一些棘手的CSS / HTML魔术。但我觉得可能是可能的。如果你不能想到一个办法，请不要提交答案。一切都是不可能的，直到你弄清楚如何做。
这里有一个变化@albert做什么。它使用 p：after {} 技巧，但使用不同的显示。 < p> 似乎必须 position：relative; 才能工作。
< style>
p {position：relative; display：inline}
p：after {position：absolute; left：0; bottom：0; width：100％; height：1px; border-bottom：1px solid＃000; content：}
< / style>
< p>第一行测试文本，其长度足以延伸到第二行。< / p> jsfiddle.net/VHdyf/
这种方法的一个好处是，它仍然使用 border-bottom ，我更喜欢在大多数情况下使用下划线。
I want to underline the final line of multi-line text, or at least create the allusion of it. Look closely at the following examples, because I'm trying to do something tricky.
A. Here's what I want to happen (the __ marks the where the text should be underlined):
A line of text that is long enough so that it wraps
to another line.
________________
B. Here's what I DON'T want:
A line of text that is long enough so that it wraps
___________________________________________________
to another line.
________________
C. Or this:
A line of text that is long enough so that it wraps
to another line.
___________________________________________________
This effect is for a CMS so I won't know the precise length of text. This means that manually inserting <span>s or <u> tags are not an option. I also don't want to user javascript. I'm well aware that the effect I want is not the default behavior and that this will require some tricky CSS/HTML magic. But I feel like it might be possible. If you can't think of a way to do it, please don't bother to submitting an answer. Everything is impossible until you figure out how to do it.
解决方案 Here's a variation on what @albert was doing. It uses the p:after{} trick but with different display. The <p> seems to have to be position:relative; to work.
<style>
p{position:relative; display:inline}
p:after{position:absolute; left:0; bottom:0; width:100%; height:1px; border-bottom:1px solid #000; content:""}
</style>
<p>first line of test text which is long enough to stretch onto a second line .</p>
One cool thing about this approach is that it still uses border-bottom, which I prefer to using underline in most cases.
这篇关于高级CSS挑战：仅使用CSS下划线的文本的最后一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
