最早的文本溢出隐藏只是简单的hidden，把看不见的都给“去掉”，就像这样：

哈哈哈哈哈哈哈哈哈哈哈

.hid{

width: 100px;

height: 20px;

overflow: hidden;

border: 1px solid red;

}

到后来发现这样不太好：比如在一些信息录入框，如果单纯的用 overflow:hidden; 可能别人会误以为信息不全由此产生一些“大问题”，所以增加了 文字溢出则用省略号代替溢出部分：

其实本质还是overflow的应用，不过结合text-overflow属性在末尾给出提示：

.hid{

width: 100px;

height: 20px;

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}

这里的white-space属性一定要有：它的作用是“强制文本不换行”。因为文本默认是“一行走不通就另起一行”，但是这样的话就会被认为“没有超出规定部分”，就不会打到“省略号”效果。

从这里可知：达到省略号效果需要两个条件 —— 文本不换行且超出规定部分！

但是现在很多时候我们既需要多行显示信息，又需要控制显示行数。由此催生了“多行文本溢出省略效果”：它的本质还是flex弹性模型作用！

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo,

tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla.

Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur.

Nulla vitae elit libero, a pharetra augue.

.indent{

display: -webkit-box; /** 将容器作为弹性伸缩盒模型 */

-webkit-box-orient: vertical; /** 弹性伸缩盒模型子节点排列方式 */

-webkit-line-clamp: 2; /** 限制容器最多显示多少行文本，超出则算“溢出” */

overflow: hidden;

}

效果如下：

到这里似乎一切都很美好。but你是不是忽略了上面代码中几乎每一个属性值前面都有的“-webkit”前缀？

这说明这种方式只能用在webkit内核的浏览器中！局限性太大。所以得通过一些兼容性稳定的属性模拟该策略。常见的非常稳定的属性也就 width/height/overflow/margin/padding等以及各种伪元素。

那能不能结合 max-height 和 line-height 去计算最大行数，通过定位布局将“省略号”固定到整个的末尾(通常是右下角)，还有就是webkit省略号有些太“突兀”了，可以用linear-gradient调整省略号所在位置的渐变背景色以使其看上去更自然一些？

——after伪元素当仁不让地扛起了大旗：

.my-indent{

position: relative;

line-height: 20px; /** 这个可以不要，自己决定 */

max-height: 40px; /** 这个用来规定“行数” */

word-break: break-all;

overflow: hidden;

}

.my-indent::after{

content: "...";

min-width: 1.8%; /** 背景区域不能太小，否则盖不住 */

position: absolute;

bottom: 0;

right: 0;

padding-left: 30px;

background: linear-gradient(to right, transparent, #fff 56%);

}

其中的 word-break: break-all; 可自行决定去留，这里笔者加上只是为了显得更好看一些：

让我们把它放到一个盒子中：

似乎也很正常，于是你又放松了警惕！

然后我们把文字减少到短短的两句：

怎么回事？明明没有溢出却还有省略号！

这就要说到上面我们做了兼容性处理的代码虽然兼容性好了，但是毕竟只有CSS，我们是没法知道“它是否会溢出规定区域”的，也就只能“无论何时都会显示”。所以我们还需结合JS做额外处理：

我们大概都知道：一个页面在超出“一屏”的大小时会有三个“基本属性”：scrollHeight —— 网页文档的真实高度、clientHeight —— 网页在浏览器窗口可视高度、以及scrollTop —— 网页向上滚动了多少距离。

从上面推论我们也知道了：文本在横向被阻拦时会自动折行。

由此类比，不管文字被隐藏了没有它的整体高度是不会变的：

所以我们可以将文字本身的高度和规定了范围的外部div的高度拿来比较，如果超出了，就显示省略号，否则隐藏 —— 通过类名来控制：

/** 将上面的my-indent换成hidden，具体代码不变 */

.hidden{

position: relative;

line-height: 20px;

max-height: 40px;

word-break: break-all;

overflow: hidden;

}

.hidden::after{

content: "...";

min-width: 1.8%;

position: absolute;

bottom: 0;

right: 0;

padding-left: 30px;

background: linear-gradient(to right, transparent, #fff 56%);

}

let box=document.querySelector(".txt");

let p=document.querySelector(".my-indent");

if(p.scrollHeight > box.offsetHeight){

p.classList.add('hidden')

}else{

p.classList.remove('hidden')

}

本文同步分享在 博客“行舟客”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。