超出两行显示查看更多

352 阅读1分钟

第一步

核心属性: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高度