如何用CSS仅显示长文本的最后一行？

纯CSS响应式方案（无JS，零卡顿） #

既然-webkit-line-clamp只能截断开头到指定行数，我们可以通过反转容器+反转文本的思路，让原本的最后一行变成显示的第一行，完美实现需求：

代码实现 #

/* 容器：只显示1行，溢出隐藏 */
.text-end-show {
  width: 100%; /* 自适应父容器宽度，响应式生效 */
  max-height: 1.5em; /* 与行高匹配，确保只显示一行，可根据字体调整 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  /* 反转容器，让文本末尾朝上 */
  transform: rotate(180deg);
}

/* 文本元素：再反转回来，保证正常阅读方向 */
.text-end-show__content {
  display: inline-block;
  transform: rotate(180deg);
}

<div class="text-end-show">
  <span class="text-end-show__content">这里是无法拆分的超长单个字符串，不管内容有多长，只会显示最后一行的内容</span>
</div>

注意事项 #

• 调整max-height值，确保和文本的line-height一致，避免出现多行或截断不全的情况；
• 特殊字符（如 emoji）旋转后显示可能异常，如果有这类场景，优先考虑下面的JS优化方案。

低卡顿JS响应式方案 #

如果纯CSS的旋转方案不适用，用ResizeObserver代替传统resize事件监听，性能更优，页面缩放时几乎不会卡顿：

代码实现 #

const container = document.querySelector('.text-end-show');
const contentEl = container.querySelector('.text-end-show__content');
const fullText = contentEl.textContent;

// 监听容器尺寸变化，仅在真的改变时计算
const resizeObserver = new ResizeObserver(() => {
  // 创建隐藏测试元素，计算当前容器能容纳的单行长字符数
  const testSpan = document.createElement('span');
  Object.assign(testSpan.style, {
    visibility: 'hidden',
    position: 'absolute',
    whiteSpace: 'nowrap',
    font: getComputedStyle(contentEl).font
  });
  document.body.appendChild(testSpan);

  let maxCharLength = 0;
  // 快速估算可容纳的字符数
  while (testSpan.offsetWidth < container.offsetWidth && maxCharLength < fullText.length) {
    testSpan.textContent = fullText.slice(-(maxCharLength + 1));
    maxCharLength++;
  }
  // 多截取几个字符，交给CSS截断开头，避免计算误差
  contentEl.textContent = fullText.slice(-(maxCharLength + 5));
  document.body.removeChild(testSpan);
});

resizeObserver.observe(container);

.text-end-show {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip; /* 直接截断开头，不需要省略号 */
}

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