【组件】文字超出宽度显示点点点，可自定义行数

注意：-webkit-line-clamp是webkit的私有属性，是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

• -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：

• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。

• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式

line - 定义几行
width - 指定宽度
text - 文字内容

/*
 * @Author: xpy
 * @Description: 
 * @ - line: Number 预计几行, 默认1行
 * @ - width: Number 文本宽度, 默认200（px）,
 * @ - text: text 文本内容
 * @Date: 2022-01-20 11:16:33
 * @LastEditTime: 2022-01-20 11:47:57
 */
import React from 'react'

const WordEllips = (props) =>{
  const { line=1, width=200, text='' } = props;
  return <div 
      title={text} 
      style={{
        width: `${width}px`,
        display:"-webkit-box",
        WebkitBoxOrient: "vertical",
        WebkitLineClamp: line,
        overflow: "hidden"
      }}
    >
    {text}
    </div>
}

export default WordEllips;

参考：https://www.cnblogs.com/like-xcm/p/5849630.html