使用element-ui框架如何让内容变成省略...
直接看最终效果
![](https://img-blog.csdnimg.cn/img_convert/89d3a61768051619e0170a0e58eb83e5.png)
可以看到超出文本的内容变成了省略...的形式
ctrl+shift+c选取字段查看样式
![](https://img-blog.csdnimg.cn/img_convert/c4fd4a974bb8020bf0963752c16b11d3.png)
![](https://img-blog.csdnimg.cn/img_convert/5ccf0a548aeae955b02fdcd77a9e3cee.png)
直接复制 .el-table .cell
溢出文本框省略掉的代码,加入这行就OK了,但是到网页还是没有变化
![](https://img-blog.csdnimg.cn/img_convert/def95337a803b9a4926e1b71171ea9b8.png)
可以看到代码被划掉了,这说明优先级不够
![](https://img-blog.csdnimg.cn/img_convert/aebc39d2f09b41d2cdb269b295690c03.png)
正确代码书写
![](https://img-blog.csdnimg.cn/img_convert/96b8a129a4f0a8016c5d6eaef1f6e9b5.png)
.el-table .cell{
white-space: nowrap !important;
overflow:hidden !important;
text-overflow: ellipsis !important;
}
最终展示
![](https://img-blog.csdnimg.cn/img_convert/0ad2b6d8b76df8c80fd6eacf4aa63750.png)