css超出隐藏显示省略号怎么设置？

当我们在进行网页前端开发的时候，一般获取文章标题，然后一行一行的显示。但是当标题过长的时候，就会造成换行显示。还有显示部分文本信息时，如果全部显示就过于繁琐，会带来不会的网页体验感。虽然我们可以使用overflow:hidden将超过宽度的字符隐藏掉。但是结尾看起来总会让人觉得有点僵硬。而且也不利于让用户知道后面还有没显示完的字符。最好的方法，就是将多余的字符用省略号来代替。

1. 单行文本超出显示省略号?

div{     /* 设置单行文本只需要三行代码即可搞定 */     overflow:hidden;     white-space: nowrap;     text-overflow: ellipsis;   }

解释说明：

• white-space:nowrap： 设置文本不换行

• overflow:hidden： 超出文本隐藏

• text-overflow:ellipsis; 文本对象溢出显示 ...

 2. 多行文本超出显示省略号?

 注意：多行文本超出显示省略号只有-webkit内核才有作用

div{     overflow: hidden;     text-overflow: ellipsis;     display: -webkit-box;     -webkit-line-clamp: 3;     -webkit-box-orient: vertical; }    

解释说明：

• display: -webkit-box 作为弹性伸缩盒子模型显示

• -webkit-line-clamp 限制文本显示行数,这是一个不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中

• -webkit-box-orient 设置或检索伸缩盒对象的子元素的排列方式