如何给动态文本段落添加下划线到行尾?

发布于 2024-12-17 23:06:47 字数 243 浏览 2 评论 0原文

我有一个动态段落(文本将不断更改),我想为其添加下划线,但是我希望下划线跨越到容器元素的右边缘,而不是停在文本末尾。如果您使用 text-decoration: underline ,它只会为每行而不是整行上存在的文本添加下划线

,我显然可以手动拆分行,然后使用边框底部来跨越整个宽度,但是文本是可变的并且可以进行更改,以便无法手动指定每一行。有没有一种方法可以动态地将每行下划线添加到末尾而不将它们分开?

谢谢大家!

戴夫

I have a dynamic paragraph (the text will be changed ongoing) that I want to underline, however I want the underlines to span to the right edge of the container element rather than stopping at the end of the text. If you use text-decoration: underline it will just underline the text that exists on each line rather than the whole line

I can obviously manually split the lines up and then use a border bottom to span the whole width however the text is variable and can be changed so each line can't be manually specified. Is there a way to dynamically underline each line to the end without splitting them up?

Thanks everyone!

Dave

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

葬﹪忆之殇 2024-12-24 23:06:47

不是真的 - 如果您想在文本而不是段落下划线。
因为要么您定位一个块元素 - 在这种情况下您只能在底部添加下划线,要么您定位一个内联元素 - 在这种情况下它不会延伸到边框。

您可以调整文本,但它仍然不会在文本右边缘的最后一行下划线。

唯一的解决办法是使用固定的行高,并使用带有“下划线图像”的重复背景,使文本看起来有下划线。
我强烈建议不要这样做,因为它在不同的浏览器中很可能有不同的工作方式。

Not really - if you want to underline the text and not the paragraph.
Because either you target a block element - in which case you can only underline the bottom, or you target an inline element - in which case it will not stretch to the border.

You could justify the text, but it would still not underline the last line to the right edge of the text.

The only hack-around would be to use a fixed line height, and use a repeating background with an "underline-image" in such a way that the text would seem underlined.
I strongly advise against this, as it most likely works differently in different browsers.

倚栏听风 2024-12-24 23:06:47

尝试使用

<u><p>Some text</p></u>

Try using <u>

<u><p>Some text</p></u>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文