关于前端:css-实现表头文字溢出省略号

28次阅读

共计 602 个字符,预计需要花费 2 分钟才能阅读完成。

思否上文本款式用不习惯,同步更新到本人的语雀,能够移步
https://www.yuque.com/diracke…

实现形式次要利用了 css 属性 text-overflow,设置溢出款式为 …。

.header-ellipsis {
white-space: nowrap;
text-overflow: ellipsis;
}

设置 white-space: nowrap; 使得文本无奈换行,单行过长溢出。(文本换行,没有溢出成果)

设置 text-overflow 设置溢出款式,可选值及对应成果如下。

1、如果心愿对一张表中的每一个表头都做表头文字溢出款式的解决,那么用在表头单元格款式上加上这个款式就能够实现成果。
(对 el-table,用深度选择器选中 el-table 的款式::v-deep .el-table th .cell 加上 white-space: nowrap;
及 text-overflow: ellipsis;)

2、如果心愿对表中的一个单元格实现这个成果,能够应用 vue 的插槽,在插槽中批改款式。
(以 el-table 为例
<el-table-column>
<template v-slot:header slot-scope=”{column, $index}” >
<span class=”header-ellipsis”>{{column.label}}</span>
</template>
</el-table-column>

正文完
 0