主页

单行文本溢出显示省略号-必须满足三个条件

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

多行文本溢出显示省略号

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

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

CSS

版权属于:Joe
作品采用:本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。
0
查看目录

目录

来自 《CSS-溢出文字省略号显示》
评论

博主很懒,啥都没有
46 文章数
7 评论量
3 分类数
49 页面数
已在风雨中度过 198天7小时13分