多行文本溢出显示省略号

好久没写东西了，踌躇了好久，想想还是要总结，需要有积累，产出一些东西。今天我们聊一聊多行文本多行文本溢出显示省略号。

• 多行文本超出省略号目前暂时没有直接的属性可以设置，比较通用的方法是设置段落的高度和行高（控制行数），超出设置overflow:hidden,然后在段落末尾设置...,同时覆盖最后一个字符（可以在段落里增加一个absolute的节点，也可使用::after）

  • 缺点：很多时候自己的大小和行高都随渲染变得不准确，然后会出现文字被截断的情况

• 多行省略号是有的，支持WebKit浏览器或移动端

    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  

  • 缺点：-webkit-line-clamp这个属性可以，不过兼容性比较差。https://caniuse.com/#search=-webkit-line-clamp
    
    image.png

• 最后提供一种比较佳的方案。遮住字符问题，简单一点可以把背景设置成线性渐变的（从透明-背景色），这样效果会稍微好一点点，想实现得完美一点可以参考clamp.js的方案
  https://github.com/josephschmitt/Clamp.js/blob/master/clamp.js
  或
  https://github.com/ftlabs/ftellipsis/blob/master/lib/index.js

-webkit-line-clamp的使用有几个注意点：

• 兼容性。其在Chrome、Safari、QQ等webkit系浏览器都很可靠。而微信小程序的View渲染引擎WKWebView和X5也都是从webkit改过来的，兼容性有较好的保障
• 该属性有个使用前提：需在文本容器开启webkit浏览器私有的Flex布局—display: webkit-box;，并将设置子元素的排列方式为-webkit-box-orient: vertical;
• 该属性对行数的计算是依据inline元素来的，只会计算inline元素的行数

后续有问题会再更新的哈