js 多行 超出

.multiline-ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 显示的行数 */
  overflow: hidden;
}

<div class="multiline-ellipsis">
  这里是一段很长的文本，可能会超出容器的尺寸，我们需要使用 CSS 来控制它的显示行数，以避免布局被破坏。
</div>

function truncateText(element, maxLines) {
  const style = window.getComputedStyle(element);
  const lineHeight = parseFloat(style.lineHeight);
  const maxHeight = lineHeight * maxLines;
  while (element.scrollHeight > maxHeight) {
    element.textContent = element.textContent.replace(/\W*\s(\S)*$/, '...');
    if (element.textContent.length === 0) break;
  }
}

document.querySelectorAll('.multiline-ellipsis-js').forEach(el => {
  truncateText(el, 3); // 显示的行数
});

<div class="multiline-ellipsis-js">
  这里是一段很长的文本，可能会超出容器的尺寸，我们需要使用 JavaScript 来控制它的显示行数，以避免布局被破坏。
</div>