如何检查是否启用了线夹？

Question

我的跨度中有一个动态文本。我想使用线夹：2.在这种情况下，最大2行文字，其余的行用“ ...”截断。

适用于：

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

我的问题：如果内容被截断，我必须显示一个工具提示。如何检查是否启用了线夹？元素的高度是相同的，innerHTML是相同的...我没有进一步的想法...

Answer 1

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

元素的“真实”高度被overflow: hidden CSS 属性裁剪，但DOM 属性scrollHeight 会报告全高，而{{3 }} 报告渲染高度。

clientHeight

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

const isTextClamped = elm => elm.scrollHeight > elm.clientHeight
const onMouseEnter = elm => 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>

这是一个 现场演示

Answer 2

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

private get _multiLineOverflows(): boolean {
    const el: HTMLElement = this._element.nativeElement;
    return el.scrollHeight > el.clientHeight;
}

Answer 3

一个基于 getClientRects().length 的简单解决方案，对我有用。

$('.text-inline').each(function() {
  var textLineCount = $(this)[0].getClientRects().length;
  var lineClampValue = $(this).parent().css('-webkit-line-clamp');
  if (textLineCount > lineClampValue) {
    $(this).parent().addClass('cut');
  }
});

.text-block {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.text-block.expand {
  -webkit-line-clamp: initial;
}

.show-text {
  display: none;
}

.cut+.show-text {
  display: initial;
}

.expand+.show-text {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div class="text-block">
  <span class="text-inline">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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span>
</div>
<button class="show-text" onclick="$(this).prev().addClass('expand')">Read more</button>

Answer 4

1. 将-webkit-line-clamp临时设置为initial。
2. 计算行数，检查其是否超过原始的-webkit-line-clamp。
3. 如果是，则表示文本已被限制。
4. 重置-webkit-line-clamp。

请参见小提琴：https://jsfiddle.net/5cf0wp79/43/