如何实现多行文本在动态宽度元素前最后一行省略且元素右对齐？

纯CSS实现方案 #

通过CSS Grid布局结合多行文本省略属性，可完美适配需求中的三种场景，解决动态宽度元素的布局难点。

注：此前尝试的inline-block或position: absolute方案无法适配动态宽度图标，原因是前者无法让文本区域自动填充剩余空间并触发省略，后者需提前知晓图标宽度来预留文本内边距，而Grid布局的1fr + fit-content组合可自动分配空间，无需依赖固定宽度。

调整后的HTML结构

<div class="description">
  <span class="text-content">这里是需要显示的段落文本，可能很长需要截断，也可能较短自动换行</span>
  <span class="status-icons">
    <img src="icon1.png" alt="状态图标1">
    <img src="icon2.png" alt="状态图标2">
  </span>
</div>

核心CSS代码

/* 容器：Grid布局分配文本与图标空间 */
.description {
  display: grid;
  grid-template-columns: 1fr fit-content(max-content);
  align-items: start;
  /* 宽度支持动态值，如百分比、max-width等 */
  width: 350px;
  max-width: 100%;
  line-height: 1.6;
  gap: 8px; /* 文本与图标间的间距 */
}

/* 文本区域：实现3行省略 */
.text-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 图标容器：保持动态宽度不换行，短文本时与文本最后一行对齐 */
.status-icons {
  white-space: nowrap;
  align-self: end;
}

场景验证

• 无动态元素时：移除.status-icons，文本区域自动占满容器，正常触发多行省略。
• 长文本带图标时：文本在3行内截断并显示省略号，图标始终位于容器右侧，省略号在图标前方。
• 短文本带图标时：文本自动换行后，图标通过align-self: end与文本最后一行底部对齐，保持右布局。

备选JS方案（兼容旧浏览器） #

若需兼容不支持line-clamp或Grid的旧浏览器，可通过JS动态计算文本高度并截断：

JS代码示例

function truncateTextWithIcons() {
  const containers = document.querySelectorAll('.description');
  containers.forEach(container => {
    const textEl = container.querySelector('.text-content');
    const iconEl = container.querySelector('.status-icons');
    if (!textEl || !iconEl) return;

    const lineHeight = parseFloat(getComputedStyle(textEl).lineHeight);
    const maxLines = 3;
    const maxHeight = lineHeight * maxLines;
    const iconWidth = iconEl.offsetWidth;
    const gap = 8;

    // 预留图标和间距的宽度
    textEl.style.paddingRight = `${iconWidth + gap}px`;
    let originalText = textEl.textContent;
    let truncatedText = originalText;

    // 逐步截断文本直到高度符合要求
    while (textEl.offsetHeight > maxHeight && truncatedText.length > 0) {
      truncatedText = truncatedText.slice(0, -1);
      textEl.textContent = truncatedText + '...';
    }

    // 未截断时恢复布局
    if (textEl.offsetHeight <= maxHeight) {
      textEl.style.paddingRight = '';
      iconEl.style.position = '';
    } else {
      // 截断后固定图标位置
      container.style.position = 'relative';
      iconEl.style.position = 'absolute';
      iconEl.style.right = `${gap}px`;
      iconEl.style.bottom = '0';
    }
  });
}

// 初始化及窗口 resize 时触发
window.addEventListener('load', truncateTextWithIcons);
window.addEventListener('resize', truncateTextWithIcons);

配套基础CSS

.description {
  position: relative;
  width: 350px;
  max-width: 100%;
  line-height: 1.6;
  min-height: calc(1.6em * 3); /* 预留3行高度 */
}

.text-content {
  overflow: hidden;
}

.status-icons {
  white-space: nowrap;
}

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