CSS控制文本行数和隐藏超出文本
大多数页面的标题,需要控制展示的宽度,并且超出的部分用省略号来代替,这里介绍如何使用纯CSS,实现文本的隐藏。
隐藏单行文本
此方法必须要保证文本存在具体的宽度。
.title{
white-space: nowrap; /*文字展示再一行*/
overflow:hidden; /* 隐藏超出的文本 */
text-overflow: ellipsis; /* 超出的文本用省略号展示 */
}
隐藏多行文本
固定写法,存在兼容性
.title{
overfilow: hidden;
text-overflow: ellipsis;
display: -webkit-box; /* 改变元素类型 */
-webkit-line-clamp: 2; /* 展示的行数 */
-webkit-box-orient: vertical;
}