.el-checkbox标签文字长度过长问题（实现自动换行）

斗帝蓝电霸王龙

已于 2024-01-26 17:00:50 修改

阅读量829

点赞数 2

文章标签： javascript 前端 vue elementui

于 2024-01-26 14:34:40 首次发布

本文链接：https://blog.csdn.net/qq_52603369/article/details/135865271

版权

问题：.el-checkbox标签文本过长怎么自动换行呢？废话少说直接说代码！

第一中样式：

效果图
代码

        <el-form-item label="" prop="delivery" style="width: 90%;">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="1">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="2"
              >哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</el-checkbox
            >
            <el-checkbox label="3">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="4">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="5">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="6">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="7">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="8">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="9">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="10">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="72">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="421">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="521">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="62">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            <el-checkbox label="721">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
		// css样式
		::v-deep .el-checkbox__label {
			vertical-align: text-top;
			white-space: normal;
			word-break: break-all;
			width: 250px;
		}

第二中样式：

效果图

在这里插入图片描述

代码

        <el-form-item label="" prop="delivery" style="width: 80%;">
          <el-checkbox-group v-model="checkList">
            <el-col :span="6">
              <el-checkbox label="1">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="2">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="3"
                >哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</el-checkbox
              >
            </el-col>
            <el-col :span="6">
              <el-checkbox label="4">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="5">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="6">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="7">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="8">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="9">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="10">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="72">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="421">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="521">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="62">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
            <el-col :span="6">
              <el-checkbox label="721">哈哈哈哈哈哈哈哈哈哈哈</el-checkbox>
            </el-col>
          </el-checkbox-group>
        </el-form-item>
       // css样式
		::v-deep .el-checkbox__label {
			vertical-align: text-top;
			white-space: normal;
			word-break: break-all;
			width: 250px;
		}