css一行或多行显示不下显示省略号

最新推荐文章于 2025-06-23 15:06:29 发布

原创最新推荐文章于 2025-06-23 15:06:29 发布 · 1k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

前端基础专栏收录该内容

18 篇文章

订阅专栏

本文介绍了如何使用CSS属性（如overflow、text-overflow、white-space和-webkit-box）来控制文本内容的显示，当内容超出容器时，实现省略号显示以及指定显示的行数，适用于响应式设计中的内容布局优化。

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

一行显示不下省略号

.title {
	overflow:hidden; //超出的文本隐藏
    text-overflow:ellipsis; //溢出用省略号显示
    white-space:nowrap; //溢出不换行
}

多行显示不下省略号

overflow:hidden; 
text-overflow:ellipsis;
display:-webkit-box; //将对象作为弹性伸缩盒子模型显示
-webkit-box-orient:vertical;//从上到下垂直排列子元素
-webkit-line-clamp:2; //这个属性不是css的规范属性，需要组合上面两个属性，表示显示的行数

在这里插入图片描述