当前位置：首页 > Web前端 > CSS

CSS-纯css实现多行文字溢出省略号（兼容所有浏览器）

时间：2023-03-31 01:34:27 CSS

前言多行文字超出高度限制出现省略号。移动端多为webkit内核，有扩展属性-webkit-line-clamp，但不是CSS规范中的属性，PC端常使用js来实现这种效果，但比较麻烦，不太靠谱.今天用纯CSS来实现完全兼容的多行省略。Text1.webkit内核的实现-webkit-line-clamp设置block元素包含的文本行数；display:-webkit-box设置块元素的布局为灵活布局；-webkit-box-orient设置灵活项的布局方向；文本溢出：省略号；表示超出方框的部分用省略号表示。2.非webkit内核实现然而本文要介绍的方法是利用CSS规范中的属性，结合特殊的实现技术完成的。这意味着所有实现CSS2.1规范的浏览器都是兼容的，不仅在纯移动领域，在传统的PC浏览器（你知道我指的是哪些浏览器）中也是可行的。好吧，让我们一起看看。一共有7个步骤。最简单的是截断文本，最难的是让一个元素在溢出时出现在其父块的右下方，当父元素没有溢出时，该元素消失不可见。（可以直接贴代码看看效果）1、最简单的基础结构布局开始：当父包含框比较小时，子元素布局在父包含框的右下角；HTML1.prop

2.main这里是主题内容，多行省略

3.end

CSS.wrap{width:400px;高度：50px；边距：20px20px50px300px；边框：5pxsolid#AAA；line-height:25px;}.prop{float:left;宽度：50px；高度：50px；背景：#FAF；}.main{浮动：对；宽度：350px；背景：#AFF；word-break:break-all;}.end{position:relative;浮动：对；宽度：50px；background:#FFA;}效果如下图（注意黄色一端的位置），其实这个实现充分利用了元素浮动的基本规则。2.定位模拟'...'我们创建一个子元素来替换要显示的省略号，当文本溢出时该元素显示在正确的位置。在接下来的实现中，我们创建一个realend元素，利用上一步中end元素的浮动位置来实现realEnd元素的定位。HTML1.prop2.main这里是溢出省略多行文字，更多内容，内容多一点，多一点内容，多一点内容，多一点内容，多一点内容，多一点内容，多一点内容，多一点内容，多一点内容3.endrealEndCSS//添加如下样式。realEnd{position:absolute;宽度：100%；高度：25px；顶部：-25px；/*等于height的负值，即文本的行高*/left:350px;背景：#FAA；font-size:13px;}效果如下图所示。如果父元素没有溢出，那么realend元素就会出现在它的右边（只要设置wrapoverflow:hidden，下面会解决）3.优化定位第二步，我们为end设置相对定位realEnd元素的元素和绝对定位。但是我们可以用更简单的代码来做到这一点，只使用相对定位。熟悉定位模型的同学应该都知道，相对定位的元素依然会占据文本流，同时给元素设置一个偏移量。这样就可以去掉end元素，只为realEnd元素设置相对定位。HTML1.prop2.main这里是溢出省略多行文字，更多内容，内容多一点，多一点内容，多一点内容，多一点内容，多一点内容，多一点内容，多一点内容，多一点内容，多一点内容realEndCSS//删除结束样式，改变realEnd样式如下。realEnd{浮动：正确；位置：相对；宽度：50px；高度：25px；顶部：-25px；行高*/left:350px;背景：#FAA；font-size:13px;}效果如图（黄色一端没了）4.缩小prop元素目前最左边的prop元素的作用是让realend元素在其正下方的时候文字溢出。在前面几节的示例代码中，为了直观演示，prop元素的宽度设置为50px。现在，为了更好地模拟实际效果，我们缩小了prop元素的宽度。CSS//改变一些样式如下.prop{float:left;width:5px;/*将宽度缩小为5px，其他属性不变*/height:50px;背景：#FAF；}.main{浮动：对；宽度：400px；margin-left:-5px;/*让主元素向左移动5px，使主元素在宽度上完全填满父元素;*/background:#AFF;word-break:break-all;}.realEnd{float:right;位置：相对；宽度：50px；高度：25px；顶部：-25px；/*等于height的负值，即文本的行高*/left:400px;/*设置margin-left:-50px,padding-right:5px是为了让realend元素的盒模型最终的宽度计算为5px。*/左边距：-50px；填充右：5px；背景：#FAA；font-size:13px;}由于CSS规范规定padding的值不能为负数，所以只需将margin-left设置为负数且等于其宽度即可。这样做的最终目的是保证realend元素在prop元素下方，保证文本溢出情况下的定位精度：渲染如下5.流式布局+伪元素为了更好的扩展性，可以使用%反而。同时，prop元素和realend元素可以使用伪元素实现，减少额外标签的使用。CSS.mutil-line-ellipsis{width:400px;高度：50px；边距：20px20px50px300px；边框：5pxsolid#AAA；行高：25px；/*overflow:hidden;*/}/*相当于beforeprop*/.mutil-line-ellipsis:before{content:'';向左飘浮;width:5px;/*将宽度缩小为5px，其余属性不变*/height:50px;background:#FAF;}/*相当于前面的main*/.mutil-line-ellipsis>:first-child{float:right;宽度：100%；margin-left:-5px;/*让主元素向左移动5px，使主元素在上面的宽度处完全填满父元素；*/背景：#AFF;word-break:break-all;}/*相当于前面的realEnd*/.mutil-line-ellipsis:after{content:'realEnd';浮动：对；位置：相对；宽度：50px；高度：25px；顶部：-25px；/*等于height的负值，即文本的行高*/left:100%;/*设置margin-left:-50px,padding-right:5px就是让realend元素的盒模型的最终宽度计算为5px。*/左边距：-50px；填充右：5px；背景：#FAA；font-size:13px;}HTML

2.main这里是moreLine文字溢出省略，内容多一点，内容多一点，内容多一点，内容多一点，a内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点内容多一点的6、在前面的实现中，如果文本没有溢出，realEnd元素会出现在父元素的右侧，就像设置CSS.mutil-line-ellipsis{overflow:hidden;}7.美化现在我们离完成更近了一步，移除每个元素的背景颜色，并将文本替换为“...”。最后，为了优化体验，使用了渐变来隐藏被“...”覆盖的文字（省略了一些兼容性属性）。CSS.mutil-line-ellipsis{width:400px;高度：50px；行高：25px；边距：20px20px50px300px；边框：5pxsolid#AAA；行高：25px；在prop*/.mutil-line-ellipsis:before{content:'';之前向左飘浮;width:5px;/*将宽度缩小为5px，其余属性不变*/height:50px;}/*等价于前面的main*/.mutil-line-ellipsis>:first-child{float:right;宽度：100%；margin-left:-5px;/*让主元素向左移动5px，使主元素满父元素满；*/word-break:break-all;}/*相当于前面的realEnd*/.mutil-line-ellipsis:after{content:'...';框大小：内容框；浮动：对；位置：相对；宽度：50px；高度：25px；顶部：-25px；/*等于height的负值，即文本的行高*/left:100%;/*设置margin-left:-50px,padding-right:5px是为了让realend元素的盒模型最终的宽度计算为5px。*/左边距：-50px；填充右：5px；字体大小：13px；文本对齐：右；background:linear-gradient(toright,rgba(255,255,255,0),#ffffff40px);}效果（可以调整和省略样式）兼容性总结从上面的实现细节来看，我们使用的技术完全CSS规范中的浮动+定位+盒模型宽度计算。唯一的兼容性问题是渐变的简单实现，因此您可以在大多数浏览器中试用它。

上一篇：uniapp全栈开发微信小程序

下一篇：GitHub最喜欢的前端项目

CSS-纯css实现多行文字溢出省略号（兼容所有浏览器）相关文章

最新推荐

猜你喜欢