如何检查 line-clamp 是否启用？

Question

我有一个跨度的动态文本。我想用line-clamp: 2.

在这种情况下，有最大值。2 行文本，其余文本被 截断…。

这适用于：

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

我的问题：如果内容被截断，则应显示工具提示。如何检测文本是否被夹住？

元素的高度是一样的，innerHTML是一样的......我没有更多的想法......

Answer 1

您可以检查元素 scrollHeight 是否超过 clientHeight：

function multiLineOverflows() {
    const el = this._element.nativeElement;
    return el.scrollHeight > el.clientHeight;
}

Answer 2

可以通过比较“clamped”元素的和来line-clamp通过javascript检测 CSS 。scrollHeightclientHeight

元素的“真实”高度由overflow: hiddenCSS 属性裁剪，但 DOM 属性scrollHeight将报告完整高度，而clientHeight报告呈现的高度。

下面的示例显示了一个夹住的文本。
尝试将其悬停以查看检测是否已记录。（文本可编辑）

const isTextClamped = elm => elm.scrollHeight > elm.clientHeight

const onMouseEnter = elm => {
  console.clear()
  console.log( isTextClamped(elm) )
}

p {
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  resize: both; /* allowing resize for this demo only */
}

<p contenteditable spellcheck="false" onmouseenter="onMouseEnter(this)">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
</p>

这是一个Codepen，它说明了这一点