el-checkbox文字超长显示省略号

Checkbox文字超长显示技巧

最新推荐文章于 2024-07-01 16:49:40 发布

原创最新推荐文章于 2024-07-01 16:49:40 发布 · 4.1k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

vue 同时被 3 个专栏收录

14 篇文章

订阅专栏

前端

14 篇文章

订阅专栏

element-ui

8 篇文章

订阅专栏

本文介绍了一种在Elment UI的Checkbox组件中处理长文本的显示方式，通过使用CSS样式实现文字超长时显示省略号，并在鼠标悬停时完整显示文字，提升用户体验。

<template>
    <div class="container">
        <h3>checkbox文字超长显示省略号，鼠标移上去显示文字</h3>
        <el-checkbox
            v-for="item in list"
            :label="item.id"
            :title="item.id + ' ' + item.name"
            :key="item.name"
            border
        >{{item.id + ' ' + item.name}}</el-checkbox>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: [
                { id: 1, name: '张三1111111111111111111111111' },
                { id: 2, name: '李四' },
            ],
        }
    },
}
</script>

<style scoped>
.container >>> .el-checkbox__label {
    width: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
</style>