html div内第二行文字显示不下的时候才用省略号代替 css实现

本文转载于:猿2048网站https://www.mk2048.com/blog/blog.php?id=jkhjkaa&title=html+div%E5%86%85%E7%AC%AC%E4%BA%8C%E8%A1%8C%E6%96%87%E5%AD%97%E6%98%BE%E7%A4%BA%E4%B8%8D%E4%B8%8B%E7%9A%84%E6%97%B6%E5%80%99%E6%89%8D%E7%94%A8%E7%9C%81%E7%95%A5%E5%8F%B7%E4%BB%A3%E6%9B%BF+css%E5%AE%9E%E7%8E%B0

有时候文字太多，但为了美观想要在第二行的时候才显示省略号，而不是第一行超出马上就出现省略号

下面是css代码：

overflow:hidden;
text-overflow: ellipsis;//显示省略号
display:-webkit-box;
-webkit-line-clamp:2;//块元素显示的文本行数
-webkit-box-orient:vertical;

截图：

定义在div上就可以了

上效果图

这样文字不会到第三行

 

本文转载于:猿2048➽https://www.mk2048.com/blog/blog.php?id=jkhjkaa&title=html+div%E5%86%85%E7%AC%AC%E4%BA%8C%E8%A1%8C%E6%96%87%E5%AD%97%E6%98%BE%E7%A4%BA%E4%B8%8D%E4%B8%8B%E7%9A%84%E6%97%B6%E5%80%99%E6%89%8D%E7%94%A8%E7%9C%81%E7%95%A5%E5%8F%B7%E4%BB%A3%E6%9B%BF+css%E5%AE%9E%E7%8E%B0

转载于:https://my.oschina.net/u/4191619/blog/3094548