问题:
.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;
}