美文网首页
checkbox label太长换行样式设置

checkbox label太长换行样式设置

作者: 苏苡 | 来源:发表于2023-05-21 09:30 被阅读0次

    <el-checkbox-group v-model="model" size="small">

            <el-row>

              <el-col v-for="(item, i) in modelList" :key="i" :span="12">

                <el-checkbox :label="item">

                  {{ item}}

                </el-checkbox>

              </el-col>

            </el-row>

          </el-checkbox-group>

    设置checkbox 默认边框样式
      ::v-deep .el-checkbox {

        border: 1px solid #DCDFE6;

        border-radius: 3px;

        padding: 5px;

      }

    设置选中的边框样式

      ::v-deep .el-col >.is-checked {

        border: 1px solid #409EFF;

      }

    设置checkboc label超出部分换行显示

      ::v-deep .el-checkbox__label {

        width: 95%;

        word-break: break-all;

        word-wrap: break-word;

        white-space: pre-wrap !important;

      }

    结果

    相关文章

      网友评论

          本文标题:checkbox label太长换行样式设置

          本文链接:https://www.haomeiwen.com/subject/veqbsdtx.html