固定宽度div中仅显示文本最后两行的实现方案（含动态追加文本场景）

嘿，刚好折腾过类似的需求！先直接给你结论：目前没有完全开箱即用的CSS原生属性能直接让div只展示最后两行文本，但我们有两种靠谱的实现方式，看你的场景来选～

方案一：纯CSS模拟（适合简单文本场景） #

CSS里的line-clamp只能控制显示前N行，没有直接对应“最后N行”的属性，但我们可以用点小技巧模拟出来——利用容器高度固定为两行文本的高度，配合文本方向反转和浮动元素来把最后两行“顶”到可视区域。

先上代码：

/* 自定义类名，可根据需求修改 */
.last-two-lines-container {
  width: 300px; /* 你的固定宽度 */
  line-height: 1.5em; /* 先设置固定行高 */
  height: calc(1.5em * 2); /* 容器高度 = 行高 × 2 */
  overflow: hidden;
  direction: rtl; /* 反转文本方向 */
  text-align: left; /* 保持文本左对齐，避免排版怪异 */
}

.last-two-lines-container::before {
  content: "";
  float: right;
  height: 100%;
  margin-top: calc(-1.5em * 2); /* 通过负边距把文本拉到最后两行的位置 */
}

对应的HTML结构：

<div class="last-two-lines-container">
  A printing press is a mechanical device for applying pressure to an inked surface resting upon a print medium (such as paper or cloth), thereby transferring the ink.
</div>

注意：这个方法依赖固定行高，若文本包含特殊标点、换行符或复杂排版，可能出现小问题，更适合纯英文/中文的简单文本场景。

方案二：JS辅助实现（更可靠，适配动态追加文本） #

如果你的文本是持续追加的，或者排版比较复杂，用JS处理会更稳妥。思路很简单：每次追加文本后，计算当前文本的总行数，然后只保留最后两行的内容。

这里给你一个可直接复用的函数：

function keepOnlyLastTwoLines(container) {
  // 克隆隐藏容器，用来计算文本真实行数（不影响页面布局）
  const clone = container.cloneNode(true);
  clone.style.visibility = 'hidden';
  clone.style.position = 'absolute';
  clone.style.top = '-9999px';
  document.body.appendChild(clone);

  // 获取行高和容器总高度，算出总行数
  const lineHeight = parseFloat(window.getComputedStyle(clone).lineHeight);
  const totalLines = Math.floor(clone.offsetHeight / lineHeight);

  if (totalLines > 2) {
    // 把文本拆成单词，从后往前拼接，直到高度覆盖两行
    const words = container.textContent.split(' ');
    let displayText = '';
    let tempHeight;

    for (let i = words.length - 1; i >= 0; i--) {
      displayText = `${words[i]} ${displayText}`;
      clone.textContent = displayText;
      tempHeight = clone.offsetHeight;
      // 高度达到两行时停止拼接
      if (tempHeight >= lineHeight * 2) break;
    }

    // 将处理后的文本放回原容器
    container.textContent = displayText.trim();
  }

  // 清理克隆的容器
  document.body.removeChild(clone);
}

// 使用示例：假设你的div id是text-box
const textContainer = document.getElementById('text-box');
// 每次给div追加文本后，调用这个函数即可
keepOnlyLastTwoLines(textContainer);

这个方法不管文本如何变化，都能准确截取最后两行，完全适配你“持续追加文本”的需求。

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