el-form-item实现内容为非文字时超出自动换行

在Element UI中，el-form-item组件通常用于表单中的输入控制项。默认情况下，如果内容超出了容器宽度，它会自动换行。但是，如果内容是非文字类型，如图片或者复杂的布局，则需要手动设置样式来实现自动换行。

以下是一个简单的例子，演示如何使用CSS样式来实现内容超出时自动换行：

<template>
  <el-form>
    <el-form-item label="内容展示">
      <div class="content-wrapper">
        <!-- 这里放置你的内容，比如图片或文字 -->
        <img src="your-image-url.jpg" alt="示例图片" class="content-item"/>
        <!-- 或者其他内容 -->
        <span class="content-item">这是一些文本内容，如果超出容器宽度将自动换行。</span>
      </div>
    </el-form-item>
  </el-form>
</template>
 
<style>
.content-wrapper {
  width: 100%; /* 设置容器宽度 */
  word-wrap: break-word; /* 允许在单词内换行 */
}
.content-item {
  display: inline-block; /* 或者其他适合的显示类型 */
  /* 其他需要的样式 */
}
</style>

在这个例子中，.content-wrapper 是一个容器，它设置了word-wrap: break-word样式，允许单词内换行。.content-item 是每个内容项的类，它设置了display: inline-block，允许内容项在必要时换行。

请根据实际内容调整.content-item的显示类型，如果内容项是块级元素，则可能需要使用display: block。