【react 技术必备】单行文本溢出，溢出部分添加省略号...

亲测可用！
主要的用的就是css样式

单行文本溢出，溢出部分添加省略号…

第一步：设置class ;{text}为超长文本

<div class={style.ellipsis}>
     {text}
 </div>

第二步：import css 样式

import style from './index.css'

第三步：index.css 样式文件

.ellipsis{
    max-width:'150px';
    width: "50%";
    /* 隐藏溢出 */
    overflow: hidden;
    /* 溢出省略 */
    text-overflow: ellipsis;
    /* 同一行不换行 */
    white-space: nowrap; 
     /* 垂直居中对齐 */
    vertical-align: middle;
    display: inline-block;

}

使用ellipsis,必须配合使用 white-space: nowrap; overflow: hidden; width: “50%”;
这样才会省略号生效。

hover后显示全部：

我看它的主要是根据dom判断clientwidth 和srcollwidth 的大小，clientwidth<srcollwidth 就是文本溢出 ，hover的时候显示全部文本。

参考链接：判断文本是否溢出/hover显示全部)