css换行显示省略号 |css flex 垂直居中

/*单行显示省略号*/
p {
white-space: nowrap;/*禁止换行*/
overflow: hidden;/*内容超过父元素大小时隐藏*/
text-overflow: ellipsis;/*省略号*/
}
/*多行显示省略号*/
p {
display: -webkit-box;/*将文本看做一行*/
-webkit-box-orient: vertical;/*设置为垂直方向*/
text-overflow: ellipsis;/*省略号*/
overflow: hidden;/*超出隐藏*/
-webkit-line-clamp: 2;/*限制行数*/
}

如上所示，大家可以通过设置white-space属性禁止文本换行，再设置overflow属性为hidden，让文本超出父元素部分隐藏。最后再设置text-overflow属性为ellipsis，即可实现单行显示省略号的效果。

但是当大家需要在多行文本中使用省略号时，上述方法无法满足需求。此时大家就需要使用display属性和-webkit-line-clamp属性来实现该效果。将文本看做一行是通过设置display属性为-webkit-box实现的，然后再将-webkit-box-orient属性设置为vertical，即可将文本排列为垂直方式。text-overflow属性同样设置为ellipsis，并且再添加一个-webkit-line-clamp属性，设置文本的行数，即可实现多行显示省略号的效果。

希望本文可以帮助大家更好的掌握CSS的省略处理效果。