（4种场景）单行、多行文本超出省略号隐藏

在日常开发中，我们常会遇到这样的场景：当文字超出宽或文字个数过多的时候，需要用省略号去隐藏，如下图所示：

那么我们该如何实现上面的效果呢？

具体分析

单行、多行文本超出省略虽然效果看着是一样的，但是具体的场景还是可以划分一下，比如：

单行
- 超出宽度隐藏
- 超出规定的字数隐藏
多行
- 超出规定的字数隐藏
- 超出规定的行数隐藏

下面我们针对这四个场景来讲讲对应的思路：

单行超出宽度隐藏

我们先定义一下基础的属性：

html 复制代码

.box { 
    background: pink; 
    width: 100px; 
    font-size: 16px; 
} 

<div class="box">我是单行省略略略略略略</div>

展示如下：

我们要变成的效果如下，超出的部分用省略号隐藏：

思路：

使用纯CSS来实现：

white-space: nowrap; 禁止换行
overflow: hidden; 超出隐藏
text-overflow: ellipsis; 超出部分用省略号

html 复制代码

.box { 
    background: pink; 
    width: 100px; 
    font-size: 16px; /* 单行文本移除隐藏 省略号代替 */ 
    white-space: nowrap; 
    overflow: hidden; /*用于确定如何提示用户存在隐藏的溢出内容。其形式可以是裁剪、显示一个省略号（"..."）或显示一个自定义字符串。*/ 
    text-overflow: ellipsis; 
} 

<div class="box">我是单行省略略略略略略</div>

这里我们需要注意的是：CSS属性应用的盒子得是一个块级元素，因为行内元素设置宽度不生效。

单行超出字数隐藏

定义一下基础属性，将宽度设置为200px：

html 复制代码

.box { 
    background: pink; 
    width: 200px; 
    font-size: 16px; 
} 

<div class="box">我是固定字数隐藏藏藏藏</div>

此时效果如下：

我们想要实现超出6个字隐藏效果如下：

思路：

因为纯CSS只能通过容器宽度和字符大小、间距来控制，不精准，所以我们使用JS来实现：

选中对应的盒子
得到盒子中对应的值
使用slice截取前6个，然后的用省略号拼接

js 复制代码

const box = document.querySelector('.box'); 
box.innerText = box.innerText.slice(0, 6) + '...';

这里我用了原生JS来实现，也可以用react或vue的语法来实现，实现的思路都是一样的。

多行超出字数隐藏

该场景直接参考单行超出字数隐藏，就不再赘述。。。

多行超出行数隐藏

定义一下基础属性：

html 复制代码

.box { 
    background: pink; 
    width: 200px; 
    font-size: 16px; 
} 

<div class="box">我是多行省略1我是多行省略2我是多行省略3我是多行省略4</div>

此时的效果如下：

我们想要让它超出两行的部分隐藏效果如下：

思路：

使用纯CSS来实现：

display: -webkit-box; 将盒子设置为弹性盒模型
-webkit-box-orient: vertical; 让内部文本按照垂直方向进行排列和计算行数
-webkit-line-clamp: 2; 限制该块级容器内文本显示的最大行数为2
overflow: hidden; 超出隐藏
text-overflow: ellipsis; 超出部分用省略号

html 复制代码

.box { 
    background: pink; 
    width: 200px; 
    font-size: 16px; /* 对象作为弹性盒子模型显示 */ 
    display: -webkit-box; /* 设置或检索伸缩盒对象的子元素的排列方式 */ 
    -webkit-box-orient: vertical; /* 2表示行数 */ 
    -webkit-line-clamp: 2; 
    overflow: hidden; /* 溢出的文本用省略号代替 */ 
    text-overflow: ellipsis; 
} 

<div class="box">我是多行省略1我是多行省略2我是多行省略3我是多行省略4</div>

总结

本文介绍了前端的一种常见的交互：单行/多行文本超出隐藏，且分析了四个具体的场景，希望能给予你一定的帮助；