javascript - 问一个css布局问题，想了很久都不知道咋做，看图

问题描述

问 题

这是个比较多见的需求，文字超过三行后显示省略号，然后箭头打开或关闭显示更多

以前都是直接用下面的代码显示省略号

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

但是这次这个箭头的位置不好弄啊，怎么写才能跟图上的效果一样呢？就是说箭头也是在第三行文字后面

补充一下，现在最主要的问题是：
图上前两行文字宽度比如为100%，第三行文字会显示省略号，但是箭头不能盖住第三行文字，而且我们也不知道省略号出现在哪个位置

这个地方如果用简单的定位箭头位置，会造成箭头盖住文字的情况

解决方案

绝对定位~
父元素position: relative;

加载更多: position: absolute; bottom: 0; right: 0;

这篇关于javascript - 问一个css布局问题，想了很久都不知道咋做，看图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！