在CSS中,通过text-overflow规定当文本溢出边界时的表现形式,ellipsis表示显示省略号。
但是很多新手试了不行,原因是单是这样设置没有触发溢出,单行显示的时候还要同时使用white-space: nowrap;
限定文字不换行,同时配合overflow: hidden;
隐藏溢出才能真正生效。具体代码如下:
要在多行文字中,还需要改变元素的显示方式,webkit内核下使用display: -webkit-box;
定义多行盒型,并配合-webkit-line-clamp
定义行数、-webkit-box-orient
确定文字显示方向。具体代码如下: