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 设置或检索伸缩盒对象的子元素的排列方式