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

【问题标题】：How do I get the text next to a checkbox to wrap around?如何让复选框旁边的文本环绕？
【发布时间】：2021-06-23 10:10:32
【问题描述】：

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

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

发件箱的 CSS 只是：

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

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

【问题讨论】：

标签： html css vue.js element-ui

【解决方案1】：

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

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

demo

【讨论】：