CSS实现文本最多两行显示超出省略，-webkit-box失效有什么替代方案？

方案1：固定行高+伪元素模拟（兼容性最优，无webkit前缀依赖） #

该方案不依赖任何私有前缀属性，可兼容几乎所有浏览环境，适合纯色背景的页面场景：

p {
  line-height: 1.5; /* 可自定义行高 */
  max-height: 3em; /* 行高的2倍，对应两行高度 */
  overflow: hidden;
  position: relative;
  padding-right: 1em; /* 预留省略号的展示空间 */
  text-align: justify;
}
p::after {
  content: "...";
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff; /* 和容器背景色保持一致即可 */
  padding-left: 2px;
}

注意事项：如果容器背景为渐变、图片等非纯色场景，该方案的省略号会出现背景不匹配的问题，可使用下面的Grid方案。

方案2：CSS Grid实现（现代浏览器兼容，无webkit前缀依赖） #

该方案适配非纯色背景场景，兼容Chrome 57+、Firefox 52+、Safari 10.1+等绝大多数现代浏览环境：

p {
  display: grid;
  line-height: 1.5;
  /* 两行高度，数值为行高*2 */
  grid-template-rows: repeat(2, 1.5em);
  overflow: hidden;
}
p::after {
  content: "...";
  text-align: right;
  /* 把省略号定位到第二行末尾 */
  grid-row-start: 2;
  align-self: end;
  /* 实现文字环绕省略号的效果 */
  shape-outside: inset(calc(100% - 1.5em) 0 0);
  float: right;
  width: 1em;
  margin-left: 0.2em;
}

方案3：JS兜底方案（极端兼容性场景使用） #

如果需要兼容非常老旧的浏览环境，可以用JS做兜底截断：

function clampTwoLines(el) {
  const lineHeight = parseFloat(getComputedStyle(el).lineHeight);
  const maxHeight = lineHeight * 2;
  let text = el.textContent;
  // 先清空内容计算容器宽度
  el.textContent = '';
  const containerWidth = el.clientWidth;
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.font = getComputedStyle(el).font;

  let totalWidth = 0;
  let clampedText = '';
  for (let char of text) {
    const charWidth = ctx.measureText(char).width;
    if (totalWidth + charWidth > containerWidth * 2) {
      clampedText += '...';
      break;
    }
    clampedText += char;
    totalWidth += charWidth;
  }
  el.textContent = clampedText;
}

// 调用方式，传入对应的p标签DOM节点即可
clampTwoLines(document.querySelector('p'));
// 窗口大小变化时重新计算
window.addEventListener('resize', () => clampTwoLines(document.querySelector('p')));

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