这是个比较多见的需求,文字超过三行后显示省略号,然后箭头打开或关闭显示更多
以前都是直接用下面的代码显示省略号
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;
把文字分成两部分,前面两行放一个p里面,第三行一个p,且其最大宽度不超过箭头。
装文字的p的给一个padding-right,给箭头腾出位置,但是这样箭头就不会再前两行文字下方了。
不影响js扩展~~