高级 CSS 挑战：如何使用 CSS 只为文本的最后一行添加下划线

Question

高级 CSS 挑战：如何使用 CSS 只为文本的最后一行添加下划线

18

我希望能够给多行文本的最后一行加下划线，或者至少营造这种效果。请仔细看以下示例，因为我想做一些棘手的事情。 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 设计的，因此我无法确定文本的精确长度。这意味着手动插入  或  标签不是一个选项。我也不想使用 javascript。我很清楚我想要的效果不是默认行为，这将需要一些棘手的 CSS/HTML 魔法。但我觉得可能是有可能实现的。如果你想不到方法，请不要提交答案。在你找到解决方案之前，所有事情都是不可能的。

- emersonthis

5

包含元素是什么？ - Derek Foulk

就像 derekmx271 说的那样，你可能想要将 border-bottom 应用于周围的 div 上，而不是对文本进行下划线。 - IluTov

@derekmx271 包含元素可以是任何我们想要的东西。 - emersonthis

@NSAddict，border-bottom 只能实现问题中的第三个效果。 - emersonthis

可能是选择元素的最后一行的重复问题。 - Jukka K. Korpela

6个回答

6

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

- Vik

2

看起来非常有前途！你能解释一下你的解决方案是如何工作的吗？为什么下划线与最终行的宽度匹配？box-shadow是做什么的？ - emersonthis

1

这看起来是一个很好的解决方案。它是否跨浏览器友好？它是如何工作的？为什么它没有被选为解决方案？ - user2991837

5

您可以使用CSS生成的内容来实现该效果。我在JSFiddle上设置了一个示例，但基本上您需要将边框添加到p:after {}; 在这个示例中，边框跨越整个宽度，这似乎是不理想的，但这只是因为父容器是为演示而制作的基础内容。我认为它应该适用于您的情况。以下是链接：http://jsfiddle.net/jalbertbowdenii/bJ9D4/

- albert

2

我不明白。你是说你的解决方案应该可以工作，但实际上并没有？这看起来像上面的 C 代码。我不理解。 - emersonthis

没有问题。我只是想明确一下，如果你只是匆匆一瞥，不理解正在发生什么，很容易做出错误的判断。此外，我没有看到你在A和C之间所做的区别。无论哪种方式，它都会在段落底部添加边框。 - albert

看一下下划线长度的差异。在 A 中，它与文本的最后一行匹配，但在 C 中，它延伸到容器的整个宽度，这似乎是您示例中的情况。 - emersonthis

+1 对于非常聪明的尝试。看看我提交的变化。我打赌我们可以做得更好... - emersonthis

CSS 生成的内容非常流畅。我尽可能地在使用它。 - albert

2

免责声明：这可能是不可能的，但请将此答案视为思考/建议开始查找的地方，而不是工作代码。

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

图片能够传达更多信息，请看以下图片：

之前：

之后：

从这些模拟图中可以看出，存在一些注意事项，并且并不能完全符合所要求的内容，但这或许可以作为一个起点。

- kwah

1

我认为这是一个非常有趣的思路方向。我也在考虑类似的事情，但是无法想出如何处理顶行的“悬挂”下划线。也许可以尝试将这种方法与Albert的:after结合起来？ - emersonthis

-1

根据这个：

选择元素的最后一行

除非使用一些JavaScript，否则不可能实现。

- IluTov

3

我的问题明确指出这是一个挑战，并请求您不要提交“无法完成”的答案。 - emersonthis

1

虽然关闭问题作为重复问题更好，但这仍然是正确的答案。 - Jukka K. Korpela

@Emerson，我刚告诉你CSS没有官方的方法来实现这个，就像你所看到的，这会导致浏览器兼容性问题。很抱歉，但你只能用JavaScript来实现或者接受这个事实。 - IluTov

1

我不同意Emerson的语气，但你链接的答案表明你无法仅选择最后一行。在我看来，这并不排除回答这个问题的可能性。（例如，考虑选择/修改除最后一行之外的每一行，而不是仅选择最后一行？） - kwah

-1

如果这是文本"A line of text that is long enough so that it wraps to another line."，而你想要给"it wraps to another line."加下划线，你只需要使用选择器即可。

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

- Bilal Ali

1

<last> 不是有效的 HTML。此外，OP 指出“我不知道文本的确切长度”，因此他们不知道在哪里放置带有下划线样式的标签。 - Brett Gregson

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- emersonthis · Accepted Answer

这是对@albert所做的变体。它使用p:after{}技巧，但使用不同的display。似乎必须是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。