elementui form label过长换行展示

作者：System 时间：2024年08月27日分类：所有,elementui 字数：523

在Element UI中，如果Form Item的label文本过长，可以通过CSS样式来强制换行显示。你可以为label添加一个类名，然后在CSS中使用word-wrap或word-break属性来实现换行效果。

以下是一个简单的示例：




<el-form-item label-class="long-label">
  <el-input v-model="form.name"></el-input>
</el-form-item>




.long-label {
  word-wrap: break-word; /* 允许在长单词或URL中换行 */
  word-break: break-all; /* 允许在任何字符间换行 */
  white-space: normal; /* 允许换行后的文本有多行 */
}

这样，当label文本过长时，它会自动换行显示在元素的宽度范围内。