CSS溢出技术问询：HTML元素类似text-overflow实现及div多行溢出省略

你说p标签已经生效但div不行，大概率是div的样式没配全，或者内部span的布局影响了效果？别慌，给你两种靠谱方案：

方案一：纯CSS快速搞定（适配含span的场景） #

只要把div的样式按下面设置，就算里面套span、a标签这些元素也能正常生效：

/* 替换成你的div类名 */
.custom-div {
  max-height: 60px; /* 你需要的最大高度，比如3行的话，行高设20px，3*20=60px */
  overflow: hidden;
  display: -webkit-box; /* 关键：将容器转为弹性盒布局 */
  -webkit-box-orient: vertical; /* 关键：设置内容垂直排列 */
  -webkit-line-clamp: 3; /* 要显示的行数，需与max-height、行高对应 */
  text-overflow: ellipsis;
  line-height: 20px; /* 固定行高，确保高度计算准确 */
}

/* 内部span可正常设置样式，不影响溢出效果 */
.custom-div span {
  color: #666;
  font-weight: 500;
}

划重点： #

1. -webkit-line-clamp必须和display: -webkit-box、-webkit-box-orient: vertical一起使用，缺一个都无法生效
2. 行高和max-height要对应，比如要显示3行，行高设20px，max-height就设60px，避免出现半行截断的情况
3. 如果你的div是inline/inline-block类型，不用额外修改，display: -webkit-box会覆盖原有属性，保证块级弹性盒布局
4. 要是碰到旧版非webkit浏览器（比如老IE）不生效，就用下面的JS方案

方案二：JS辅助实现（全兼容） #

如果要兼容所有浏览器，或者需要更灵活的控制（比如动态调整行数），用JS实现会更稳妥：

function handleOverflowEllipsis(container) {
  const containerHeight = container.offsetHeight;
  const contentHeight = container.scrollHeight;
  const lineHeight = parseInt(window.getComputedStyle(container).lineHeight);

  if (contentHeight <= containerHeight) return;

  // 递归获取所有文本节点，避免破坏span等DOM结构
  const getTextNodes = (element) => {
    let nodes = [];
    element.childNodes.forEach(node => {
      if (node.nodeType === Node.TEXT_NODE && node.textContent.trim()) {
        nodes.push(node);
      } else if (node.nodeType === Node.ELEMENT_NODE) {
        nodes = nodes.concat(getTextNodes(node));
      }
    });
    return nodes;
  };

  const textNodes = getTextNodes(container);
  if (!textNodes.length) return;

  // 从最后一个文本节点开始逐步截断
  let lastNode = textNodes[textNodes.length - 1];
  let originalText = lastNode.textContent;
  while (container.scrollHeight > containerHeight && originalText.length > 0) {
    originalText = originalText.slice(0, -1);
    lastNode.textContent = originalText + '...';
  }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.custom-div').forEach(handleOverflowEllipsis);
  // 窗口resize时重新计算，适配响应式场景
  window.addEventListener('resize', () => {
    document.querySelectorAll('.custom-div').forEach(handleOverflowEllipsis);
  });
});

为啥p标签生效div不生效？ #

p标签默认是块级元素，你的.para样式应该已经配齐了-webkit-line-clamp相关属性；而div可能被其他样式覆盖了display属性，或者漏加了-webkit-box-orient: vertical，打开浏览器开发者工具查看div的computed样式，一查就能找到问题~

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