折叠容器内文本隐藏实现，无需overflow属性避免滚动条出现

以下三种方案均不需要配置overflow属性，不会产生滚动条：

• 方案1：-webkit-line-clamp 多行截断（推荐） #

  现代浏览器原生支持的纯CSS方案，代码量最小，效果稳定，默认自带末尾省略号：

  .fold-container {
    display: -webkit-box;
    /* 数字对应需要展示的文本行数 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 1.5;
    /* 可选：设置最大高度和行高*行数对齐，增强兼容性 */
    max-height: 3em;
  }
  

• 方案2：clip-path 裁剪方案 #

  适合需要自定义裁剪规则、自定义省略号样式的场景：

  .fold-container {
    line-height: 1.5;
    /* 高度 = 展示行数 * 行高，超出高度的内容会被clip-path直接裁剪 */
    height: 3em;
    clip-path: inset(0 0 0 0);
    position: relative;
  }
  /* 自定义末尾省略号 */
  .fold-container::after {
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 12px;
    /* 背景色和父容器背景保持一致即可 */
    background: #ffffff;
  }
  

• 方案3：JS 动态裁剪方案 #

  适合需要兼容旧版浏览器的场景，通过计算文本高度自动截断内容：

  const foldContainer = document.querySelector('.fold-container')
  // 配置最大展示行数
  const MAX_SHOW_LINE = 2
  const lineHeight = parseFloat(getComputedStyle(foldContainer).lineHeight)
  const maxAllowedHeight = lineHeight * MAX_SHOW_LINE
  const fullText = foldContainer.innerText
  
  // 二分法快速找到最大可展示的文本长度
  let left = 0, right = fullText.length
  while (left < right) {
    const mid = Math.floor((left + right + 1) / 2)
    foldContainer.innerText = fullText.slice(0, mid) + '...'
    if (foldContainer.offsetHeight <= maxAllowedHeight) {
      left = mid
    } else {
      right = mid - 1
    }
  }
  foldContainer.innerText = fullText.slice(0, left) + '...'
  

方案选型建议 #

• 常规业务场景优先使用-webkit-line-clamp方案，兼容Chrome、Firefox、Safari等99%以上的现代浏览器
• 需要自定义省略号样式、裁剪形状时选择clip-path方案
• 需要兼容IE等极端旧版浏览器时使用JS动态裁剪方案

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