如何让复选框旁边的文本环绕？

问题描述

我的网站上有这些复选框。格式如下

<el-row>
  <div class="sentBox" align="left" :style="{display: sentence1 === '' ? 'none' : 'block'}">
    <el-checkBox v-model="sent1"> {{sentence1}} </el-checkBox>
  </div>
</el-row>

sentBox 的 CSS 只是：

.sentBox {
  width: 500px;
  margin: 10px;
}

但最终发生的情况是句子可能太长并且超过了屏幕的宽度，迫使用户向右滚动以查看整个句子。正如您在下图中所看到的，句子被截断了，我必须向右滚动。我做错了什么？

解决方法

元素 UI 中的 el-checkbox 设置了 white-space:nowrap 样式，但您可以应用 white-space:initial 以允许文本换行：

.el-checkbox {
  white-space: initial;
}

demo