亲测可用!
主要的用的就是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显示全部)