element的多选框内容超出长度怎么进行换行呢

Question

这里文字部分长度，怎么让文字进行换行呢？
以下是我的HTML代码

<el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="ruleForm.type">
                <el-col :span="8">
                    <el-checkbox
                        label="美食/餐厅线4硬71一语音关乎衣服一个回复一语音关乎衣服一一语音关乎衣服一u 有感于姑爷分表上活动"
                        name="type"
                    ></el-checkbox>
                </el-col>
                <el-col :span="8">
                    <el-checkbox label="美食/餐厅线4硬71一语音关乎衣服一个回复u 有感于姑爷分表上活动" name="type"></el-checkbox>
                </el-col>
                <el-col :span="8">
                    <el-checkbox label="美食/餐厅线4硬71一语音关乎衣服一个回复u 有感于姑爷分表上活动" name="type"></el-checkbox>
                </el-col>
            </el-checkbox-group>
        </el-form-item>

Answer 1

.el-checkbox__label {
  display: inline;
}

.el-checkbox, .el-checkbox__input {
  white-space: normal;
}

Answer 2

太长建议换成select

Answer 3

.el-checkbox, .el-checkbox__input {
  white-space: normal;
  word-break: break-all;
}