checkbox label太长换行样式设置

2023-05-21  本文已影响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;

  }

结果
上一篇下一篇

猜你喜欢

热点阅读