css样式：自定义行数末尾多余数据省略号显示

原创已于 2022-04-13 11:02:43 修改 · 293 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-04-13 10:59:29 首次发布

3 篇文章

订阅专栏

该博客探讨了在处理过多文本时如何利用CSS属性text-overflow、overflow和-webkit-line-clamp来避免串行和数据溢出的问题。通过设置-webkit-line-clamp为2，限制了内容显示为两行，从而实现简洁有效的展示效果。

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

问题图片：
描述过多，导致串行，数据溢出
在这里插入图片描述

解决：

text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

-webkit-line-clamp 指得是几行，数据显示存在几行

解决后的效果图：
在这里插入图片描述