likes
comments
collection
share

CSS 溢出文字省略号显示

作者站长头像
站长
· 阅读数 293

1、单行文本溢出显示省略号

 /* 1、强制一行内显示文本(默认值是 normal,会自动换行) */
 white-space: nowrap; 
 /* 2、超出的部分隐藏 */
 overflow: hidden;
 /* 3、用省略号代替超出部分 */
 text-overflow: ellipsis;

2、多行文本溢出显示省略号

多行文本溢出显示省略号,有较大兼容性问题,适合于 webKit 浏览器或移动端(因为移动端大部分是 webkit 内核)

 overflow: hidden;
 text-overflow: ellipsis;
 /* 弹性伸缩盒子模型显示 */
 display: -webkit-box;
 /* 限制在一个块元素显示的文本行数,这里设置为 2 行 */
 -webkit-line-clamp: 2;
 /* 设置伸缩盒对象的子元素的排列方式 */
 -webkit-box-orient: vertical;