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

最新推荐文章于 2025-05-29 10:22:30 发布

weixin_44440116

最新推荐文章于 2025-05-29 10:22:30 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue element-ui 前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44440116/article/details/107366972

vue 同时被 3 个专栏收录

14 篇文章

订阅专栏

前端

14 篇文章

订阅专栏

element-ui

8 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>