Jquery - 逐行截断文本(不是字符数)

Question

我需要一个Jquery脚本来逐行截断文本(而不是字符计数).

我想实现一个均匀截断的文本块.它应该有一个"更多"和"更少"的链接来扩展和缩短文本段落.我的文本段落包含在一个带有类的div中,如下所示:

<div class="content">
<h2>Headline</h2>
<p>The paragraph Text here</p>
</div>

我能找到的SOF最接近的解决方案是下面一个(但它`对于textarea元素,对我不起作用): 限制在textarea的行数

非常感谢任何提示.本

Answer 1

对于基本方法,您可以查看line-heightCSS属性并在计算中使用它.请记住,此方法不会考虑大于该高度的其他内联元素(例如图像).

如果您想要更高级的东西,可以使用getClientRects()函数获取有关每一行的信息.此函数返回TextRectangle对象的集合,每个对象具有宽度,高度和偏移量.

请参阅此答案以获取有关工作方式的示例(尽管是一个无关的目标)getClientRects().

更新,有一点时间回来并用一个实际的例子更新这个答案.这是基本的,但你明白了:

几个指针:

getClientRects返回的集合是静态的,如果包含元素的尺寸发生变化,它将不会自动更新.我的示例通过捕获窗口的resize事件来解决这个问题.
对于我不理解的一些奇怪的标准兼容性原因,您调用getClientRects的元素必须是内联元素.在我的例子中,我使用了一个容器div,其中包含另一个div中的文本display: inline.

Answer 2

如果您使用等宽字体，您将有机会完成这项工作，因为您很清楚对于定义宽度的元素，每行可以容纳多少个字母。然而，如果一个单词跨行，那么这可能会变得棘手。

e：发现另一个问题，这基本上就是您所追求的问题 - 他们也没有真正的解决方案，但在我看来，行高和元素高度似乎最接近。