CSS实现单行、多行文本溢出显示省略号的实现方法

最新推荐文章于 2024-09-05 15:51:55 发布

且菜且折腾

最新推荐文章于 2024-09-05 15:51:55 发布

阅读量240

点赞数 1

分类专栏： css 文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/weixin_43933139/article/details/111880157

版权

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了CSS实现单行、多行文本溢出显示省略号的方法。单行溢出需设置宽度，使用text-overflow:ellipsis等属性；多行溢出则要结合display:-webkit-box等多个属性。还补充了ie核心浏览器的相关设置及部分属性说明。

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

CSS实现单行、多行文本溢出显示省略号的实现方法

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览

一、单行溢出

1,单行溢出，超出部分显示…或者截取。前提必须有宽度。
CSS：{width:xxpx;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}截取为clip;
实现代码

width:300px;    
overflow: hidden;    
text-overflow:ellipsis;    
whitewhite-space: nowrap;

实现效果:

二、多行溢出

CSS： {display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:2;-webkit-box-orient:vertical;}
实现代码

display: -webkit-box;    
-webkit-box-orient: vertical;    
-webkit-line-clamp: 3;    
overflow: hidden;

实现效果:

补充一下:
ie核心的浏览器一定要定义line-height与高度，-webkit-line-clamp意思就是几行，例如

line-height: 20px;
max-height: 40px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;

-webkit-line-clamp

-webkit-line-clamp 是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。
text-overflow，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本。