css样式超出的文字变成三个点省略（单行与多行两种情况，谷歌浏览器）

KLW75

于 2020-05-28 14:18:33 发布

阅读量1.9k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.csdn.net/KLS_CSDN/article/details/106403690

本文介绍如何使用CSS实现文本的单行或多行省略显示效果，关键在于运用text-overflow、white-space及-webkit-line-clamp等属性，适用于网页布局中对长文本的优雅处理。

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

单行情况

( 包含文字的容器需要有高度 )

width：1000px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

多行情况

通过 -webkit-line-clamp: 2; 来控制几行内容，例子是两行。

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

css样式 超出的文字变成三个点省略 （单行与多行两种情况，谷歌浏览器）

css样式超出的文字变成三个点省略（单行与多行两种情况，谷歌浏览器）