首页 > css如何控制文字多行显示,溢出截断后末尾出现省略...

css如何控制文字多行显示,溢出截断后末尾出现省略...

纯CSS能实现吗?

<div style=" overflow: hidden;text-overflow:ellipsis; width: 150px; height: 16px;font-size:12px;line-height:16px;">我跑过三行后想被省略后留下痕迹。我跑过三行后想被省略后留下痕迹。我跑过三行后想被省略后留下痕迹。我跑过三行后想被省略后留下痕迹。我跑过三行后想被省略后留下痕迹。我跑过三行后想被省略后留下痕迹。
</div>

以上不会出现省略...


这个是用css是可以实现的,不过需要给定宽高
display:-webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;


纯CSS是很不容易做到的。我收藏过一个相当何弃疗的办法,我相信你不想这么做。

老老实实的用js吧 :)


参考 MDN 的这篇文章: https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

多行的话,参考这个,也是不用脚本的: http://www.mobify.com/blog/multiline-ellipsis-in-pure-css/

【热门文章】
【热门文章】