如何实现多行文件名截断且始终显示文件扩展名？

核心思路 #

放弃按字符数截断的方案，通过CSS布局分离文件名主体与后缀，让后缀固定显示在第二行末尾，主体部分自动适配容器宽度换行并截断，彻底解决长单词导致的提前截断问题。

实现步骤 #

1. 拆分文件名（JS）

先分离文件名主体和后缀，兼容无后缀的情况：

const parseFileName = (file: File) => {
  const nameSegments = file.name.split('.');
  let body = file.name;
  let suffix = '';

  // 处理带后缀的文件名
  if (nameSegments.length > 1) {
    suffix = nameSegments.pop()!;
    body = nameSegments.join('.');
  }

  return { body, suffix };
};

2. 调整HTML结构

用容器包裹主体和后缀元素，让后缀可以独立定位：

<div class="filename-wrap">
  <span class="filename-body">{{ parseFileName(item).body }}</span>
  <!-- 无后缀时不显示后缀元素 -->
  <span v-if="parseFileName(item).suffix" class="filename-suffix">....{{ parseFileName(item).suffix }}</span>
</div>

3. 关键CSS样式

通过定位和行高控制，让后缀固定在第二行末尾，主体自动截断：

.custom-delete-label-isShow {
  margin: auto;
  height: 105px;

  .filename-wrap {
    position: relative;
    width: 100%; /* 根据实际容器宽度调整 */
    line-height: 1.4;
    font-size: 14px;
    color: #fff;
    padding: 5px 8px;
    /* 限制容器高度为两行 */
    max-height: calc(1.4em * 2);
    overflow: hidden;
    word-break: break-all; /* 确保长单词能拆分换行 */
  }

  .filename-body {
    display: inline-block;
    /* 让主体占据两行空间，给后缀预留位置 */
    margin-bottom: -1.4em;
  }

  .filename-suffix {
    display: inline-block;
    position: absolute;
    bottom: 5px; /* 与容器padding-bottom对齐 */
    right: 8px; /* 与容器padding-right对齐 */
    background: inherit; /* 继承背景色，覆盖主体末尾的文本 */
    padding-left: 4px; /* 避免与主体文本重叠 */
    white-space: nowrap; /* 确保后缀不换行 */
  }
}

方案优势 #

• 完全适配容器宽度，不会因为字符数计算错误导致提前截断
• 后缀始终固定在第二行末尾，符合需求效果
• 兼容无后缀的文件名场景
• 无需手动计算字符数，逻辑更简洁

内容的提问来源于stack exchange，提问作者reinficul