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

Question

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

<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;
}

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

Answer 1

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

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

demo

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

How do I get the text next to a checkbox to wrap around?

html

css

vue.js

element-ui