el-upload内容超出如何设置

El-upload是Element UI库中的一个组件，用于文件上传。如果上传的内容（如文件名或预览图）超过了容器的宽度，你可以通过调整组件样式或配置项来控制展示方式。以下是几种常见的处理方法：

1. **CSS样式**:
- 可以设置`.el-upload`元素或其子元素的`overflow`属性为`hidden`，隐藏超出部分。
- 或者设置`text-overflow`为`ellipsis`，显示省略号。

.el-upload {
  width: ...; /* 自定义最大宽度 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

2. **自适应高度**:
如果内容是动态生成的，可以设置上传区域的高度动态适应内容，比如使用`line-clamp`属性（只在现代浏览器支持）。

.el-upload .el-upload__preview {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 控制显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

3. **设置预览尺寸**:
对于图片预览，可以限制预览图的最大尺寸，使用`img`的`width`和`height`属性，或者使用`object-fit: contain`来保持原始比例但裁剪超出部分。

<el-upload>
  <img :src="file.url" :style="{ maxWidth: '100%', maxHeight: '150px', objectFit: 'contain' }"/>
</el-upload>