首先,分析超出内容有两种情况,单行内容超出和多行内容超出,以下逐一说明:
单行内容操作:
单行操作必须有width属性,就是元素要有宽和高的限制才可以,具备以上基本条件之后,编写以下代码
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
此时,即可看到单行文本超出显示省略号的效果。
多行内容操作:
多行文本超出省略早期是没有该写法的,本文使用的是css3对WebKit的拓展写法,需要注意,该方法只适用于WebKit浏览器和移动端页面。
以下为关键代码片段:
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
此时,即可看到多行文本超出显示省略号的效果。
简单解释:
首先设置元素为弹性盒模型,也即是display:box,然后设置限制文本的行数,使用line-clamp属性,最后设置弹性盒子内容的排列方式box-orient,别忘却了还需要添加超出隐藏属性设置overflow: hidden。
以上就是设置CSS中超出的文本内容显示省略号的方法!