Jquery - 按行截断文本（而不是按字符数）

我需要一个 Jquery 脚本来逐行截断文本段落（而不是按字符数）。

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

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

我在 SOF 上找到的最接近的解决方案是下面的（但它是针对 textarea 元素的，对我不起作用）：限制文本区域中的行数 https://stackoverflow.com/questions/556767/limiting-number-of-lines-in-textarea

非常感谢您的任何提示。 本

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

如果您想要更高级的东西，您可以使用以下命令获取有关每行的信息getClientRects()功能。该函数返回一个集合文本矩形每个对象都有宽度、高度和偏移量。

See 这个答案 https://stackoverflow.com/questions/2456442/how-can-i-highlight-the-line-of-text-that-is-closest-to-the-mouse/2456631#2456631这里有一个例子（尽管是一个不相关的目标）getClientRects() works.

http://jsbin.com/ukaqu3/2 http://jsbin.com/ukaqu3/2

一些提示：

• 返回的集合获取客户端矩形是静态的，如果包含元素的尺寸发生变化，它不会自动更新。我的示例通过捕获窗口的调整大小事件来解决此问题。

• 由于一些我不理解的奇怪的标准合规原因，您称之为的元素获取客户端矩形on 必须是内联元素。在我的示例中，我使用一个容器 div，其中另一个 div 中的文本为display: inline.