在overflow:hidden的Flex容器中截断重叠文本的最优方案

这个问题我之前处理过不少次——用overflow:hidden只是粗暴隐藏超出内容，很容易出现最后一行文本被切半截、甚至视觉上和底部元素重叠的情况，得用更优雅的文本截断方案才行。结合你的Flex布局和固定高度需求，我给你两种最优方案，优先推荐纯CSS方案，兼容旧浏览器的话再用JS辅助：

一、纯CSS多行截断（推荐，现代浏览器） #

这是目前最简洁高效的方案，利用CSS原生的line-clamp属性实现自动截断并显示省略号，完全不需要JS，性能拉满。

实现步骤： #

1. 先确保你的Flex tile内部是垂直排列的，给.flex__teaser设置垂直Flex布局：

.flex__teaser {
  display: flex;
  flex-direction: column;
  height: 288px; /* 你的TILE_MAX_HEIGHT */
}

2. 给内容容器添加截断样式，计算好最大显示行数（根据你的内容高度和行高来算，比如行高1.5em、字体16px的话，一行约24px，减去标题高度后剩余200px的话，就是8行左右）：

.flex__teaser .content-container {
  flex: 1; /* 让内容容器占据tile的剩余垂直空间 */
  display: -webkit-box;
  -webkit-line-clamp: 8; /* 这里设置最大显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word; /* 确保长单词也能换行截断 */
}

优点： #

• 代码简洁，无需JS干预
• 原生支持，性能优秀
• 截断后自动显示省略号，不会出现半截文本

二、JS辅助截断（兼容旧浏览器/动态高度场景） #

如果需要兼容IE这类旧浏览器，或者你的tile高度是动态计算的，可以结合JS来精确控制文本截断，避免视觉重叠。

结合你提供的代码片段，修改后的实现如下：

(function($) { 
  "use strict"; 
  const TILE_MAX_HEIGHT = 288; 
  const LINE_HEIGHT = parseInt($('.flex__teaser .content-container').css('line-height'), 10); // 获取内容行高

  var ArticleTile = { 
    init: function() { 
      this.$tiles = $('.flex__teaser'); 
      this.iterateTiles();
    },
    iterateTiles: function() {
      const self = this;
      this.$tiles.each(function() {
        const $tile = $(this);
        const $content = $tile.find('.content-container');
        // 计算内容容器的可用高度（减去标题、padding等非内容区域的高度）
        const usedHeight = $tile.find('.tile-header').outerHeight(true) + parseInt($tile.css('padding-top'),10) + parseInt($tile.css('padding-bottom'),10);
        const maxContentHeight = TILE_MAX_HEIGHT - usedHeight;
        const maxLines = Math.floor(maxContentHeight / LINE_HEIGHT);

        // 如果内容实际高度超过可用高度，就截断
        if ($content[0].scrollHeight > maxContentHeight) {
          const fullText = $content.text().trim();
          const truncatedText = self.getTruncatedText(fullText, maxLines, $content.width());
          $content.text(truncatedText + '...');
        }
      });
    },
    // 按行数截断文本的核心方法
    getTruncatedText: function(text, maxLines, containerWidth) {
      const words = text.split(' ');
      let truncated = [];
      let tempText = '';
      // 创建隐藏测试元素，用来计算文本高度
      const testEl = $('<div>', {
        css: {
          position: 'absolute',
          visibility: 'hidden',
          whiteSpace: 'pre-wrap',
          lineHeight: `${LINE_HEIGHT}px`,
          width: `${containerWidth}px`,
          fontSize: $('.flex__teaser .content-container').css('fontSize')
        }
      }).appendTo('body');

      for (const word of words) {
        testEl.text(`${tempText} ${word}`.trim());
        const currentLines = Math.ceil(testEl.height() / LINE_HEIGHT);
        if (currentLines > maxLines) break;
        tempText = `${tempText} ${word}`.trim();
        truncated.push(word);
      }
      testEl.remove();
      return truncated.join(' ');
    }
  };

  $(document).ready(() => ArticleTile.init());
})(jQuery);

核心思路： #

1. 计算内容容器的可用高度（tile总高度减去标题、内边距等）
2. 根据行高算出最多能显示的行数
3. 通过创建隐藏元素测试文本高度，逐步添加单词直到达到最大行数，最后截断并添加省略号

额外注意事项 #

• 确保Flex容器的align-items设置为stretch（默认值），让所有tile高度一致
• 如果tile内有图片等可变高度元素，最好给它们设置固定高度，避免挤压内容区域
• 纯CSS方案的line-clamp目前需要webkit前缀，但Chrome、Firefox、Safari等现代浏览器都已支持，无需担心

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