CSS文字溢出显示省略号

在CSS中，通过text-overflow规定当文本溢出边界时的表现形式，ellipsis表示显示省略号。

但是很多新手试了不行，原因是单是这样设置没有触发溢出，单行显示的时候还要同时使用white-space: nowrap;限定文字不换行，同时配合overflow: hidden;隐藏溢出才能真正生效。具体代码如下：

white-space: nowrap; text-overflow: ellipsis; overflow: hidden;

要在多行文字中，还需要改变元素的显示方式，webkit内核下使用display: -webkit-box;定义多行盒型，并配合-webkit-line-clamp定义行数、-webkit-box-orient确定文字显示方向。具体代码如下：

text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;