高级CSS挑战：仅使用CSS在最后一行文本下划线

Question

我想强调多行文本的最后一行，或者至少创建它的暗示。仔细看下面的例子，因为我正在尝试做一些棘手的事情。

A。以下是我想要发生的事情（__标记文字应加下划线的位置）：

A line of text that is long enough so that it wraps
to another line.
________________

B。这是我不想要的：

A line of text that is long enough so that it wraps
___________________________________________________
to another line.
________________

C。或者这个：

A line of text that is long enough so that it wraps
to another line.
___________________________________________________

此效果适用于CMS，因此我不知道文本的确切长度。这意味着手动插入<span>或<u>标签不是一种选择。我也不想用javascript。我很清楚我想要的效果不是默认行为，这需要一些棘手的CSS / HTML魔法。但我觉得这可能是可能的。如果您想不出办法，请不要费心提交答案。在你弄清楚如何做之前，一切都是不可能的。

Answer 1

这是@albert正在做的变化。它使用p:after{}技巧，但使用不同的display。 <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>first line of test text which is long enough to stretch onto a second line .</p>

http://jsfiddle.net/VHdyf/

这种方法的一个很酷的事情是它仍然使用border-bottom，我更喜欢在大多数情况下使用underline。

Answer 2

您可以使用css生成的内容来实现效果。我在jsfiddle上设置了一个示例，但基本上你将边框添加到p:after{};在这个例子中，边框一直延伸，这似乎是不可取的，但这仅仅是因为父容器是演示的香草。我认为它应该适应你的情况。在这里你去：http://jsfiddle.net/jalbertbowdenii/bJ9D4/

Answer 3

免责声明：有可能这是不可能的，但请考虑这个答案是大声思考/建议一个地方开始寻找，而不是工作代码。

是否有可能突出显示文本行（颜色与背景颜色相匹配），然后调整行高，使得较低行的背景与下划线重叠？

图片说千言万语，所以看看这些：

在：

在：

从这些模型中你可以看到有几个警告，并不完全符合要求，但也许这是一个起点..？

Answer 4

.title {
  width: 700px;
  overflow: hidden;
}

.title:after {
  content: '';
  display: inline-block;
  vertical-align: bottom;
  height: 1px;
  box-shadow: -100vw 100vw 0 100vw;
}

<h1 class="title">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</h1>

Answer 5

如果这是文本“一行文本足够长，以至于可以换行到另一行。”并且您想在“下划线”处加上下划线。您只需要使用选择器即可。

对于HTML：

<div>
     A line of text that is long enough so that 
     <last>it wraps to another line.<last>
<div>

对于CSS：

div last{
    text-decoration: underline;
}

Answer 6

根据这个：

Selecting the last line of a <p> element

除非你使用一些JavaScript，否则它是不可能的。