css设置文本溢出显示省略号的样式

最新推荐文章于 2024-08-26 01:16:20 发布

小五Ivy

最新推荐文章于 2024-08-26 01:16:20 发布

阅读量530

点赞数

分类专栏： CSS 文章标签： css react

本文链接：https://blog.youkuaiyun.com/weixin_44471622/article/details/105292261

版权

CSS 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了在前端开发中如何处理单行和多行文本溢出的问题，通过使用CSS属性如width, white-space, overflow, text-overflow, display, -webkit-line-clamp等，实现文本在指定宽度和行数限制下显示省略号。

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

文本溢出分为两种情况，一种是单行文本溢出，一种是多行文本溢出。

单行文本溢出显示省略号

width: 140px; //宽度必须要加上
white-space: nowrap; //不换行
overflow: hidden;
text-overflow: ellipsis; //省略号“…”隐藏超出范围的文本
display: inline-block; //如果不是行内样式，需要转成行内样式

多行文本溢出显示省略号

在react中设置多行文本溢出会有不生效的情况，下面代码可以解决这个问题。

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
-webkit-line-clamp: 6; //显示的文本行数
/*! autoprefixer: off */
-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式
/* autoprefixer: on */