CSS 实现文本的单行和多行溢出省略效果

迷南。 2022-09-07 14:43 176阅读 0赞

![6044920c21cf4ec5c06d8ec987393a55.png][]

**单行文本**

.text {
        overflow: hidden; 
      text-overflow: ellipsis; 
      white-space: nowrap;
    }

*  `overflow: hidden`（文字长度超出限定宽度，则隐藏超出的内容）
 *  `white-space: nowrap`（设置文字在一行显示，不能换行）
 *  `text-overflow: ellipsis`（规定当文本溢出时，显示省略符号来代表被修剪的文本）

**多行文本（css）**

.text {
      display: -webkit-box;
      overflow: hidden;
      -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
    }

*  `-webkit-line-clamp: 2`（用来限制在一个块元素显示的文本的行数, 2 表示最多显示 2 行。为了实现该效果，它需要组合其他的WebKit属性）
 *  `display: -webkit-box`（和 1 结合使用，将对象作为弹性伸缩盒子模型显示 ）
 *  `-webkit-box-orient: vertical`（和 1 结合使用 ，设置或检索伸缩盒对象的子元素的排列方式 ）
 *  `overflow: hidden`（文本溢出限定的宽度就隐藏内容）
 *  `text-overflow: ellipsis`（多行文本的情况下，用省略号“…”隐藏溢出范围的文本)

**多行文本（js）**

*  监听DOM尺寸变化
 *  判断是否溢出 scrollHeight > offsetHeight
 *  二分查找多行截取字符临界值（算法的解法：判断字符串是否溢出，二分查找字符串溢出临界子串，控制...显示）

## 最后 ##

欢迎关注「三分钟学前端」，回复「交流」自动加入前端三分钟进阶群，每日一道编程算法面试题（含解答），助力你成为更优秀的前端开发！

![bc66d0bf77e8ac5659e433b2c5edfb0d.gif][]

》》面试官也在看的前端面试资料《《

“在看和转发”就是最大的支持

[6044920c21cf4ec5c06d8ec987393a55.png]: /images/20220829/be99a755e4ef410e98cfada1d04ccc02.png
[bc66d0bf77e8ac5659e433b2c5edfb0d.gif]: /images/20220829/e80df9c26b6d4df7983af7dc0f183b00.png