15

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

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>s 或<u>标签不是一种选择。我也不想使用 javascript。我很清楚我想要的效果不是默认行为，这需要一些棘手的 CSS/HTML 魔法。但我觉得这可能是可能的。如果您想不出办法，请不要费心提交答案。在你弄清楚如何去做之前，一切都是不可能的。

4

6 回答 6

18

这是@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

于 2013-03-03T01:08:36.777 回答
5

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

于 2013-03-03T00:43:02.877 回答
5 

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

于 2018-01-15T13:50:28.937 回答
2

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

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

图片说一千个字，所以看看这些：

前：
在此处输入图像描述

后：
在此处输入图像描述

从这些模型中，您可以看到有一些警告并且与所要求的不完全匹配，但也许这是一个起点..？

于 2013-03-03T10:59:35.963 回答
-1

根据这个：

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

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

于 2013-03-03T00:13:07.900 回答
-1

如果这是文本“一行足够长的文本，可以换行”。并且你想强调“它换行到另一行”。您只需要使用选择器即可。

对于 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;
}
于 2020-01-19T19:55:34.230 回答