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

Question

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

答:这就是我想要发生的事情(__标记文本应加下划线的位置):

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

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

根据这个：

选择 <p> 元素的最后一行

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