当前位置:首页 > html5+css3 > 正文内容

多行文字固定行显示省略号

自由小鸟5年前 (2019-07-02)html5+css31881

第一种

display: -webkit-box

-webkit-box-orient: vertical
-webkit-line-clamp: 2

overflow: hidden



第二种

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;background: -webkit-linear-gradient(left, transparent, #fff 55%);background: -o-linear-gradient(right, transparent, #fff 55%);background: -moz-linear-gradient(right, transparent, #fff 55%);background: linear-gradient(to right, transparent, #fff 55%);}


版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=44

“多行文字固定行显示省略号” 的相关文章

动态计算rem适应

<script>~ function(){function computed(){let HTMl=document.documentElement,deviceW=HTML.clientWidth, //显示屏宽度deviceWdesignw=750,     &n...

弹出框在页面左右上下居中的写法

自适应写法 .dialog{ border-radius: 8px; display: flex; flex-direction: column; position: absolute; top: 50%; left: 50%;...