【Css】-webkit-line-clamp

一句话高冷总结--自以为高冷：
-webkit line clamp：css属性允许将块容器的文字限制为指定的行数,并用省略号填充尾部。

好基友搭档--没你不行：
display:-webkit-box/-webkit-inline-box：设置容器显示为webkit盒子。
-webkit-box-orient: vertical：设置盒子内文字显示方向。

完美主义者--给你最好的：
overflow:hidden:隐藏不需要显示的部分，当然，就算你不写，设置的行数属性位置也会出现省略号，但是，注意但是它就不会按照指定的行数显示了，而是显示全部(那你莫名放个省略号在中间算什么？)

背后的家族势力--承诺都是美好的：

浏览器兼容

带你去看流星雨--看看就好：

长相思
可以看到，算上空白行，正好显示了6行文字，最后一行被隐藏掉了，并且文末有 ... 的省略号，表示内容仍有。
官方文档给出了很多浏览器都已经兼容了，除了IE，不过对于Edge和Firefox，其实很多用户也并没有将版本更新到这么高，本人就是一个例子，所以想使用这个属性，还是要比较慎重的。
官方也提出了一个line-clamp作为标准Css3属性，但是当前这个时间节点并未实现，而且就算实现了，其实也比较难向后兼容的，所以实用性暂时不强。

好在按预期行数显示省略号这个功能还是比较常用的，所以网上的解决方案也比较丰富。

简单陈列几个供大家参考：

• clamp.js
• jQuery.dotdotdot
• react-lines-ellipsis

单行文本省略号神马的，就比较简单了，我的话就是每次记不住单词怎么拼...也做一个备忘吧~

  overflow : hidden ;
  text-overflow : ellipsis ;
  white-space : nowrap ;

哦啦~暂时就嘚吧嘚这些吧！