Question

鉴于此：

<p class="summary">Here is some text, could be 5 words, could be 500 words.</p>

我用这段代码抓住段落高度：

var pHeight = $('.summary').height();

在我的情况下，如果它大于32，则它是三行（太长）。在这种情况下，我想修剪文本并插入“阅读更多...”链接。问题是，我如何找出修剪的位置以使文本只占用两行？如果只有某种方式我可以采取字数并将其乘以一个数字，即每个字母的大小。我认为使用monospace会相对简单，但这是我们正在讨论的Arial。

正确的方向任何一点都会受到赞赏，谢谢！

Answer 1

由于某些原因，没有很好的方法。首先，不同的浏览器/平台可能会以不同的方式呈现字体（但差异很小）。其次，javascript无法提取给定字体（AFAIK）的单个字符大小。

如果我正在实现这样的东西，我只需要一个最长允许长度的常量和substring它。我也会做这个服务器端，因为没有必要将数据发送到你不会使用的客户端。

另一种方法（虽然不是我使用的方法）是将文本放在具有设置宽度和高度的div中，用overflow: hidden剪切任何溢出。当然，这可能会让你有一些部分切断的话，所以我会反对它。

Answer 2

如果你的身高太高，你可以简单地在第三行上放一个白色背景的'p'并在其中加上“Read More ...”。并添加一个高度和“溢出：隐藏”到你的'p'。

Answer 3

我会使用jquery文本扩展器。有几个，但这里有一个例子：http://plugins.learningjquery.com/expander/切片点是基于字符数，但有一些试验和错误，你应该能够找到一个字符数，给你两行。

Answer 4

我已经有一段时间处理过这些问题了，同时也清除了一些想法。这在代码中很昂贵，但它对我来说很有用。如果你知道西班牙语并且需要一些编码想法，我在my blog解决了类似的问题，现在我将引导你。

根据文本的lineHeight，你知道容器的大小是否有2行。所以想象你的容器是Ypx高。

正如我所说的，并不是很便宜，但是我已经做了一些测试，完成它所需的时间是线性的，所以用几句话就会很快（当你进行10000次检查时）不到一秒钟）

希望它有所帮助！

Answer 5

我写了一个小jQuery插件，从内容中删除单词，直到元素低于某个高度。（并且它在内容的末尾添加了三个点。）此解决方案类似于Lomefin的解决方案。与他的解决方案相比，我的解决方案针对您只需删除几个单词的情况进行了优化。

代码为here。

Answer 6

我会说使用几个不同的通用文本块，看看需要多少个字符才能达到两行。平均结果并向下舍入，这样你就不会意外地过去。然后使用您的真实文本，您将四舍五入到该猜测数字，并且您的文本应填充大约2行。