[分享]css3怎么设置省略号显示

CSS3是Web开发的重要组成部分，可以通过它来设置省略号的显示。省略号是当文本太长无法完全展示时，通过省略号来代替显示，能够更好的展示内容。/ 单行文本省略 / textoverflow:ellip...

CSS3是Web开发的重要组成部分，可以通过它来设置省略号的显示。省略号是当文本太长无法完全展示时，通过省略号来代替显示，能够更好的展示内容。

/* 单行文本省略 */
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden;

/* 多行文本省略 */
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
overflow:hidden; 

以上代码中，text-overflow:ellipsis表示在文本过长时，采用省略号的方式表示；white-space:nowrap表示文本不能换行；overflow:hidden表示溢出的部分隐藏。

而当涉及到多行文本省略时，需要使用到webkit-box系列的属性。其中，display:-webkit-box表示将元素作为弹性伸缩盒模型显示；-webkit-box-orient:vertical表示弹性伸缩盒子元素按照竖直方向排列；-webkit-line-clamp:2表示显示2行文本；overflow:hidden表示溢出部分隐藏。

通过CSS3的设置，可以很好的控制文本显示效果，实现多种文本显示样式。以上是省略号显示的设置方式，希望对大家有所帮助。