el-upload文件名称过长悬浮展示

可以尝试使用 CSS 中的 `text-overflow` 属性和 `white-space` 属性来解决文件名称过长悬浮展示的问题。

首先，设置文件名称的容器为一定宽度的固定宽度，例如：

.file-name {
  width: 150px;
}

然后，使用 `text-overflow` 属性来指定当文本溢出容器时应该如何处理：

.file-name {
  white-space: nowrap; /* 禁止文字换行 */
  overflow: hidden; /* 隐藏溢出的文本 */
  text-overflow: ellipsis; /* 使用省略号表示溢出的文本 */
}

这样，当文件名超过指定的宽度时，就会在末尾显示省略号，同时鼠标悬浮在文件名上时，可以使用 `title` 属性来显示完整的文件名：

<div class="file-name" title="文件名过长的情况下，鼠标悬浮在文件名上可以查看完整名称">文件名过长的情况下，鼠标悬浮在文件名上可以查看完整名称</div>

你可以根据实际情况调整 `width` 属性的值，以及应用这些样式的元素的类名。

相关问题

el-upload 上传文件名过长悬浮展示

可以使用 `el-tooltip` 组件来实现悬浮展示，具体实现方法如下：

1. 在 `el-upload` 组件中添加 `list-type="picture-card"` 属性，让上传的文件以图片卡片的形式展示。

2. 使用 `slot-scope` 属性来自定义上传列表中每个文件的内容，并在需要展示文件名的元素上添加 `el-tooltip` 组件。

3. 在 `el-tooltip` 组件中设置 `content` 属性为文件名，并设置 `placement` 属性为 `top-start` 或 `top-end`，让提示框在元素上方悬浮展示。

示例代码如下：

<el-upload
  class="upload-demo"
  action="/upload"
  list-type="picture-card"
>
  <template slot-scope="{ file }">
    <div class="file">
      <img src="file.url" alt="" class="file-img">
      <el-tooltip class="item" effect="dark" :content="file.name" placement="top-start">
        <div class="file-name">{{ file.name }}</div>
      </el-tooltip>
    </div>
  </template>
</el-upload>

需要注意的是，由于 `el-upload` 组件的上传列表是异步渲染的，所以如果需要在组件加载时就对上传列表中的元素进行操作，可以使用 `ref` 属性来获取上传列表组件，然后在 `mounted` 钩子函数中监听 `change` 事件，等待上传列表渲染完成后再进行操作。示例代码如下：

<el-upload
  class="upload-demo"
  action="/upload"
  list-type="picture-card"
  ref="upload"
>
  <template slot-scope="{ file }">
    <div class="file">
      <img src="file.url" alt="" class="file-img">
      <el-tooltip class="item" effect="dark" :content="file.name" placement="top-start">
        <div class="file-name">{{ file.name }}</div>
      </el-tooltip>
    </div>
  </template>
</el-upload>

mounted() {
  this.$nextTick(() => {
    this.$refs.upload.$el.addEventListener('change', () => {
      // 在上传列表渲染完成后进行操作
      // ...
    })
  })
}

el-upload上传的文件名称过长 悬浮

为了解决el-upload上传的文件名称过长悬浮的问题，可以通过调整样式来解决。具体方法如下：

.el-upload-list__item-name {
  max-width: 200px; /* 设置最大宽度 */
  overflow: hidden; /* 超出部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 不换行 */
}

这样就可以将文件名称的宽度限制在200px以内，并且超出部分会显示省略号，不会影响其他元素的布局。