HTML中实现指定行的文本以...结尾（类似text-overflow:ellipsis效果）

最新推荐文章于 2022-10-21 18:21:43 发布

原创最新推荐文章于 2022-10-21 18:21:43 发布 · 965 阅读

1 ·

CC 4.0 BY-SA版权

随笔专栏收录该内容

146 篇文章

订阅专栏

本文介绍了一种使用HTML和CSS实现多行文本溢出时显示省略号的方法。通过绝对定位元素覆盖的方式达到类似服务端截断的效果，适用于不需要精确截断的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

text-overflow:ellipsis

这个css只对单行有效，对多行文本无效。一般需要服务端根据文本长度截取才能实现。不过无意中在网上找到下面的代码（html+css），参考一下。

<div style="position:relative; width:200px; height:40px; line-height:20px; overflow:hidden; z-index:1;">
	文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分文字部分
	<div style="position:absolute; right:0; bottom:0; z-index:10; background-color:#FFFFFF;">...</div>
</div>