css实现多行超出添加省略号

最新推荐文章于 2025-05-16 09:48:22 发布

jscyl

最新推荐文章于 2025-05-16 09:48:22 发布

阅读量702

点赞数

CC 4.0 BY-SA版权

分类专栏：兼容性

本文链接：https://blog.youkuaiyun.com/jscyl/article/details/88064220

兼容性专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用CSS实现文本超出一行或多行时以省略号显示的效果，包括关键样式属性及注意事项，适用于网站项目中个人简介或商品名称等场景。

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

在我们写网站项目时,经常性的会遇到这样的需求

如个人简介或商品名称要求只能一行显示,如超出一行,以省略号显示

那么此时我们就给该元素添加以下样式

width: 200px;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
/** 对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical;
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3;
/** 显示的行数 **/
overflow: hidden;
/** 隐藏超出的内容 **/
word-wrap:break-word;
/*英文强制换行*/

注意 :

多行省略号不支持火狐浏览器,因此一般我们还要给其添加一个合适的高度,避免火狐下页面布局错乱