css实现的3种省略方式
css实现的3种省略方式
公共:
body{ max-width: 500px; margin: 20px auto; display: flex; flex-direction: column; justify-content: center; align-items: center; } .ellipsis-text { line-height: 30px; font-size: 20px; } .s-line { width: 200px; }
1.单行省略
<p class="ellipsis-text s-line sl-ellipsis">CSS非常有趣和搞怪,可以做一些JS也能做的事情</p>
.sl-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
2.多行省略
<p class="ellipsis-text m-line ml-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
.ml-ellipsis { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
3.伪类省略
<p class="ellipsis-text m-line mls-ellipsis">层叠样式表(CSS)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。</p>
.mls-ellipsis { overflow: hidden; position: relative; max-height: 90px; } .mls-ellipsis:after { position: absolute; right: 0; bottom: 0; padding-left: 40px; background: linear-gradient(90deg, transparent, #fff 50%); content: "..."; }
效果:
本文作者: Jasmine
本文链接: https://www.jianbaizhan.com/article/718
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!