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

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

自由小鸟6年前 (2019-07-02)html5+css32436

第一种

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%;...

实现背景色半透明渐变效果

实现背景色半透明渐变效果

父级相对定位 .box__shadow_left,.box__shadow_right{ position: absolute; top:0; height: 65rpx; width: 60px; z-index: 9; } 左边的效果 .box_...