react 文本截取，css超出用省咯号显示

法一: 封装一个公共的方法:

 封装一个方法在src/utils/utils.js文件里

---

法二: css样式写法

1. 单行文本超出部分显示省咯号

①第一步：溢出隐藏 —— overflow: hidden;
②第二步：让文本不会换行， 在同一行显示——white-space: nowrap;
③第三步：用省略号来代表未显示完的文本 ——text-overflow: ellipsis;

比如:

---

 

2. 多行超出部分显示省略号

①第一步：溢出隐藏 —— overflow: hidden;

②第二步：用省略号来代表未显示完的文本 ——text-overflow: ellipsis;

③第三步：必须设置盒子属性为-webkit-box——display: -webkit-box;

④第四步：设置超出几行后，超出部分显示省略号，比如-webkit-line-clamp：2；则表示超出2行的部分显示省略号，如果设置为3，那么就是超出3行部分显示省略号；

⑤第五步：单词破坏：主要用于破坏英文单词的整体性，即在英文单词还没有在一行完全展示时就换行，简单的理解就是一个单词可能会被分成两行展示——word-break: break-all;

⑥第六步：盒子实现多行显示的必要条件，文字垂直展示——-webkit-box-orient: vertical;