如何根据父元素动态尺寸实现CSS换行或多行省略效果？

基础HTML结构 #

<div class="parent">
  <p class="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

核心场景实现与动态判断逻辑 #

一、CSS类定义 #

提前定义三种场景对应的样式类，方便动态切换：

/* 场景1：父高度足够，文本自动换行 */
.child-wrap {
  white-space: break-spaces;
  overflow: visible;
}

/* 场景2：父高度不足以容纳一行，单行截断显示省略号 */
.child-single-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 场景3：父高度允许多行，但内容超出行数限制，多行截断 */
.child-multi-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--max-lines, 3); /* 用CSS变量动态控制行数，默认3行 */
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 父元素基础样式（实际宽高由上级/同级元素决定，此处为示例） */
.parent {
  width: 200px;
  border: 1px solid #eee;
  /* height: 动态值 */
}

二、重点：第三种多行截断场景说明 #

-webkit-line-clamp是目前主流浏览器支持的原生多行截断方案，无需手动计算行高与内容高度，核心要求：

• 必须配合display: -webkit-box和-webkit-box-orient: vertical使用
• 通过CSS变量--max-lines动态调整允许的最大行数，适配父容器的动态高度
• 省略号由text-overflow: ellipsis自动渲染，仅当内容超出限制行数时显示

三、动态场景判断的JavaScript实现 #

由于父容器尺寸是动态变化的，需通过ResizeObserver监听尺寸变化，实时计算并切换样式类：

const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

// 监听父容器尺寸变化
const resizeObserver = new ResizeObserver(entries => {
  entries.forEach(entry => {
    const parentEl = entry.target;
    // 计算父容器可用高度（移除内边距影响，按需调整）
    const parentStyles = getComputedStyle(parentEl);
    const parentPaddingTop = parseFloat(parentStyles.paddingTop) || 0;
    const parentPaddingBottom = parseFloat(parentStyles.paddingBottom) || 0;
    const parentAvailableHeight = parentEl.clientHeight - parentPaddingTop - parentPaddingBottom;

    // 获取子元素单行高度
    const lineHeight = parseFloat(getComputedStyle(child).lineHeight) || 1.2 * parseFloat(getComputedStyle(child).fontSize);

    // 临时移除所有样式，获取无限制时的原始内容高度
    child.classList.remove('child-wrap', 'child-single-ellipsis', 'child-multi-ellipsis');
    const originalContentHeight = child.offsetHeight;
    child.classList.add('child-wrap'); // 重置回默认样式

    // 场景判断
    if (originalContentHeight <= parentAvailableHeight) {
      // 场景1：内容高度未超出父容器，自动换行
      child.classList.replace('child-single-ellipsis', 'child-wrap');
      child.classList.replace('child-multi-ellipsis', 'child-wrap');
    } else if (lineHeight >= parentAvailableHeight) {
      // 场景2：父容器连一行都放不下，单行截断
      child.classList.replace('child-wrap', 'child-single-ellipsis');
      child.classList.replace('child-multi-ellipsis', 'child-single-ellipsis');
    } else {
      // 场景3：父容器可容纳多行但内容超量，计算最大行数并应用多行截断
      const maxLines = Math.floor(parentAvailableHeight / lineHeight);
      child.style.setProperty('--max-lines', maxLines);
      child.classList.replace('child-wrap', 'child-multi-ellipsis');
      child.classList.replace('child-single-ellipsis', 'child-multi-ellipsis');
    }
  });
});

// 启动监听
resizeObserver.observe(parent);

// 初始化时强制触发一次判断
resizeObserver.disconnect();
resizeObserver.observe(parent);

四、关键注意事项 #

1. 兼容性：ResizeObserver支持Chrome 64+、Firefox 69+、Edge 79+，如需兼容IE可使用polyfill或定时器轮询方案
2. 行高计算：若子元素line-height设为normal，getComputedStyle会返回实际像素值；若未设置行高，可通过font-size * 1.2（浏览器默认行高系数）估算
3. 动态内容：若文本内容动态更新，需在内容变更后手动触发一次尺寸判断逻辑

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