第一步
核心属性:shape-outside: content-box;
<style>
.button{
flot:right;// 让button靠右
margin-top:var(--line-height); //让这个button到达第二行
shape-outside: content-box; //让简介可以围绕我环绕
}
</style>
<p 这里给超出两行截取>
<span class='button'>查看更多</span>
<span class='brief'>
我是简介,我不确定有多少我是简介,我不确定有多少我是简介,我不确定有多少我是简介,我不确定有多少我是简介,我不确定有多少我是简介,我不确定有多少我是简介,我不确定有多少
</span>
</p>
写到这里,已经可以现实。·超出两行显示查看更多·了
第二步
怎么让只有一行的时候不显示这个按钮呢
只能用js了
找个地方写个 setinteval 获取brief高度,多会儿获取到 多会把setinteval清除掉
拿到高度判断下有几行 就好了
第三步 resize的时候
监听页面变化,在写个截流获取brie高度