CSS 文字溢出部分用省略号代替

最新推荐文章于 2022-08-17 21:29:00 发布

火星飞鸟

最新推荐文章于 2022-08-17 21:29:00 发布

阅读量407

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端面试-CSS CSS 文章标签：前端 css

本文链接：https://blog.csdn.net/Jack_lzx/article/details/118893700

前端面试-CSS 同时被 2 个专栏收录

13 篇文章

订阅专栏

CSS

10 篇文章

订阅专栏

这篇博客介绍了如何使用CSS实现单行和多行文字溢出时的省略显示。通过`overflow:hidden`、`text-overflow:ellipsis`和`white-space:nowrap`等属性，可以轻松实现单行文本溢出时显示省略号。对于多行文本，利用`-webkit-box`、`-webkit-line-clamp`和`-webkit-box-orient`属性，可以限制显示的行数并隐藏多余内容。

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

1. 单行文字溢出省略

只需添加三行代码即可：

overflow: hidden; /* 超出的文本隐藏 */
text-overflow: ellipsis; /* 显示省略符号来代表被修剪的文本。 */
white-space: nowrap; /* 文本不换行 */

举例：

CSS：

.demo {
    width: 200px;
    height: 20px;
    border: 2px solid #000;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

2. 多行文字溢出省略

需要添加4行CSS代码：

display: -webkit-box; /* 将对象作为弹性伸缩盒子模型显示 */
-webkit-box-orient: vertical; /* 设置或检索伸缩盒对象的子元素的排列方式 */
-webkit-line-clamp: 3; /* 表示显示的行数，不是CSS规范属性 */
overflow: hidden; /* 超出的文本隐藏 */

举例：

CSS：

.demo {
    width: 200px;
    height: 64px;
    border: 2px solid #000;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}