利用浮动和伪元素实现文字末尾省略号代替,并用按钮控制 展开/收起 全部文字内容
此时可以初步实现样式效果,在此之后需要修改伪元素高度,以实现按钮位置一直保持在父元素的右下角
.test::before {
content: '';
float: right;
width: 0;
height: 100%;
margin-top: -30px; // 此数值为按钮元素高度
}
此外需要在父元素外再加一层元素并设置display: flex; 否则伪元素的height:100%;不生效
<div class="warp">
<div class="test">
<div class="button">展开</div>
xxxxxx文字内容
</div>
</div>
.warp {
display: flex;
}
具体原理请参考大佬文章:https://blog.csdn.net/qq_32429257/article/details/122339194