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

【问题标题】：Advanced CSS challenge: underline only the final line of text with CSS高级 CSS 挑战：使用 CSS 仅在最后一行文本下划线
【发布时间】：2020-01-20 04:19:10
【问题描述】：

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

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

【问题讨论】：

包含元素是什么？
就像derekmx271说的，可能是border-bottom你要套用在周围的div上，而不是给文字加下划线。
@derekmx271 包含元素可以是我们想要的任何东西。
@NSAddict border-bottom 只会达到问题中的第三种效果。
Selecting the last line of a element的可能重复

标签： html css

【解决方案1】：

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

【讨论】：

帅哥。 p 需要位置设置才能使生成的内容正常工作。希望它是你所需要的
我现在无法访问一堆浏览器来测试这个。我很想知道这对跨浏览器有多友好，尤其是在 IE7/8/9 中
如果解决方案必须在 IE7 中运行，为什么还要用 HTML5 和 CSS3 标记问题？
在 Firefox 上，jsfiddle 在 first 文本行下方显示一个边框。
这适用于 Firefox。有人有适用于所有主流现代浏览器的解决方案吗？

【解决方案2】：

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

【讨论】：

我不明白。你是说你的解决方案会奏效，但它没有？这看起来像上面的 C。我不明白。
不行。我只是很清楚，快速瞥一眼它，而不了解发生了什么会很容易假设它不是。我也看不出你在a和c之间有什么区别。无论哪种方式，它都会在段落底部添加边框
看下划线长度的区别。在 A 中，它匹配最后一行文本，但在 C 中，它拉伸了容器的整个宽度，在您的示例中似乎就是这种情况。
+1 表示非常聪明的尝试。查看我提交的变体。我敢打赌我们可以做得更好......
css 生成的内容很流畅。我尽可能使用它

【解决方案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>

【讨论】：

这看起来很有希望！你能解释一下你的解决方案是如何工作的吗？为什么下划线与最后一行的宽度匹配？ box-shadow 在做什么？
这看起来是一个很好的解决方案。是否跨浏览器友好？这是如何工作的？为什么它没有被投票作为解决方案？

【解决方案4】：

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

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

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

之前：

之后：

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

【讨论】：

我认为这是一个非常有趣的思路。我在考虑类似的事情，但不知道如何处理顶行的“悬垂”下划线。也许尝试将此方法与 albert 的 :after 结合使用？

【解决方案5】：

据此：

Selecting the last line of a element

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

【讨论】：

我的问题明确承认这是一个挑战，并要求您不要提交“做不到”的答案。
这仍然是正确的答案，但最好将问题作为重复项关闭。
@Emerson 我刚刚告诉过你，在 CSS 中没有官方的方法可以做到这一点，就像你已经看到的那样，这会导致浏览器兼容性问题。很抱歉，你要么必须用 Javascript 来做，要么就用它。
我不同意艾默生的语气，但您链接到的答案表明您无法仅选择最后一行。在我看来，这并不排除回答这个问题的可能性。（例如，考虑选择/更改除最后一行之外的每一行，而不是只选择最后一行？）

【解决方案6】：

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

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

【讨论】：

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