文本超出变成省略号的CSS解决方案

刚才解决了一个困扰我很久的文本溢出变省略号的问题，正式工作后，发现这个使用场景很普遍，比如展示在首页的新闻标题要单行省略，新闻正文要多行省略，今天我来谈谈单行省略和多行省略，尽我所知吧。

一、单行省略

首先上代码：

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

现在来分析代码。关键性作用的代码当然是text-overflow: ellipsis; text-overflow指定了文本溢出后的显示方式，默认值是clip，表示直接裁切，ellipsis表示变成省略号

但是，以上这三行是缺一不可的！

经过了我的一些测试，我发现white-space: nowrap;的作用是防止文本换行。换言之，就算你的文本元素写死了宽度和高度，设置了超出隐藏overflow: hidden;并且文字有很多很多，多出来的文字会换行到下一行去，那么省略当然发生在下一行，这一行是看不到省略号的。

overflow: hidden;是为了让元素超出的部分被隐藏，如果没有这个设置，则超出的部分仍然显示，并没有东西被隐藏——就没有东西“溢出”，没有溢出，text-overflow就不会生效

另外补充一点别人的经验，这个方法适用于块级元素；宽度可以写固定宽度也可以为auto；如果这个元素设置了flex:1;则还需要设置min-width/widh：0;才会生效

二、多行省略

上面这个方案使用到了white-space：nowrap;也就是里面的文本不可能换行，也就不可能实现多行省略，第一次看到多行省略的代码是在mui的css代码里面。

下面是多行省略的css代码：

.e2 {
	text-overflow: -o-ellipsis-lastline;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
    /* 下面的数字表示几行以后显示省略号 */
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

text-overflow: ellipsis;和overflow:hidden还是老样子。倒是多了很多奇奇怪怪的属性。

这些属性也是缺一不可的，来谈谈我个人的理解

display: -webkit-box; //把元素设置为webkit弹性盒子，这个是flex的老版本写法

-webkit-box-orient: vertical; //设置了 -webkit-box后，必须设置盒子的排列方向为垂直方向

-webkit-line-clamp: 2; //设置多少行的末尾出现了省略号，如果不使用overflow:hidden，则下面的内容还会显示出来

昨天需要做多行省略，我在网上拷了一个别人的解决方案，结果没有成功，各种百度text-overflow: ellipsis;不生效的原因，一无所获，最后才发现是少了-webkit-box-orient: vertical;

上面这个代码虽然有webkit前缀，可是我用火狐浏览器测试的时候，发现也是正常的，这个就不知道是什么原因了。