使用JavaScript计算行数

Question

我需要对动态文本进行剪裁，以便从中提取2行摘录（引人入胜的预告）。 问题在于，显示字符串所占的行数取决于所使用的字符（例如，“w”和“i”的宽度不同），浏览器和操作系统（Mac上的字体与Windows上的同一种字体并不完全相等）。

有没有办法在javascript中剪切超过x行的文本（已知div长度固定）？

谢谢。

- Baylock

---

所以，您并不是特别寻找换行符，而是要查找将重新流动到给定div中的文本量？ - sarnold

不如使用CSS的文本溢出属性，而不是用JavaScript去测量东西（这往往会很混乱）？ - Ry-

CSS的“overflow”属性会怎样？我需要在文字到达第三行之前将其截断，并添加类似于“阅读更多”的内容。谢谢。 - Baylock

@sarnold：很抱歉，我不理解你的问题。我需要剪切 div 中的文本以保留前两行。由于文本是动态生成的，我无法预测其内容，也就无法预测其准确长度。请看我在上面的问题。想象一下我想保留前两行并在后面添加“阅读更多”。清楚了吗？谢谢。 - Baylock

你可以使用HTML5 Canvasзљ„measureText()方法来接近实现；不断添加单词，直到超过容器的宽度，然后再为第二行重复此操作。 - Phrogz

Answer 1

你可以使用类似这样的方法 http://jsfiddle.net/cSTzn/，使用overflow: hidden;和适当的height。

编辑：在右下角加入了链接，根据需要进行自定义http://jsfiddle.net/cSTzn/1/。

- Kris Ivanov

---

虽然缺点是隐藏文本并没有被隐藏得很好——仍然很容易被选择。（如果所有的文本都很短，这并不是问题...但如果文本非常庞大，也许根本不应该下载它...？） - sarnold

谢谢，但这不是我需要的。我想创建一个摘录。通过保留文本的前两行并允许用户单击链接查看整个内容，从而创建更大文本的一种引人入胜的方式。例如，在WordPress上非常常见。这与“隐藏”文本的右侧或底部部分无关。CSS对此问题无济于事。谢谢。 - Baylock

我看了一下，感谢你的努力。问题在于等宽字体意味着根据您的平台，系统将使用一个具有相同长度的字母的字体，但这并不意味着字体（因此相对长度）在其他操作系统上也是相同的。因此，我可以创建一个PHP函数来根据适合两行的字母数截断文本，但如果我以Mac作为参考进行操作，则在Windows或Linux上会有所不同，更不用说安装在系统上的等宽字体了。这不是理想的解决方案。 - Baylock

为了确保我们在同一页面上：这里是一个链接，展示了我正在寻找的内容：每个标题都有三行（不会更多）。文本被截断，并以“...more>>”结尾。news.yahoo.com - Baylock

在这种情况下，他们使用可变长度，在运行了大量测试后，他们已经确定了一个范围，将截断的文本放在第三行，您可以复制他们所做的，但是正如您所看到的，它并不能完美地填充三行，有时它在开头，但肯定是可行的，祝好运。 - Kris Ivanov