记录 div多行超出省略号

最新推荐文章于 2023-02-12 22:14:14 发布

原创最新推荐文章于 2023-02-12 22:14:14 发布 · 523 阅读

2 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

44 篇文章

订阅专栏

本文介绍如何使用CSS的overflow、text-overflow和white-space属性来处理文本溢出，实现单行或多行文本的省略号效果，适用于网页布局中对文本长度有限制的情况。

点击有惊喜
 个人博客
单行：设定div宽度
加入如下的代码：

 overflow: hidden;  //超出隐藏
 text-overflow: ellipsis;//省略号
white-space: nowrap;//不换行
overflow: hidden和white-space: nowrap都是必须的否则不会显示省略号；

多行：
加入如下代码：

max-height:100px;       /*首先设置div高度*/

overflow:hidden;           /*设置超出部分隐藏*/

text-overflow:ellipsis;    /*然后设置文本隐藏方式*/

/*为了实现多行文本也有效果要设置如下3个属性，具体属性的含义我还不是很清楚：*/

display:-webkit-box;

-webkit-line-clamp:3;    /*只显示3行，如果不设置这个属性，会出现文本被拦腰截断的现象*/

-webkit-box-orient: vertical;