当前位置: 首页 > Web前端 > vue.js

[css]实现表格表头省略号

时间:2023-03-31 22:44:36 vue.js

的溢出。如果您不习惯文本样式,可以将其更新为您自己的语言。可以移步https://www.yuque.com/diracke...实现方法主要是使用css属性text-overflow添加,溢出样式设置为...。.header-ellipsis{white-space:nowrap;text-overflow:ellipsis;}设置white-space:nowrap;以至于文字不能换行,单行太长溢出。(Textwraps,nooverfloweffect)settext-overflow设置溢出样式,可选值及对应效果如下。1、如果要对表格中的每个表头应用表头文字溢出样式,可以通过在表头单元格样式中添加该样式来达到效果。(对于el-table,使用depthselector选择el-table::v-deep.el-tableth.cellpluswhite-space:nowrap;andtext-overflow:ellipsis;的样式)2.如果你想编辑table中的A单元格实现这个效果,可以使用vue的slot修改slot中的样式。(以el-table为例{{column.label})