如何跟踪单词换行时的行数？

Question

有一个要在 div 中输出的文本，使用非固定间距字体打印。此 div 高度仅允许打印 4 行文本。是否可以跟踪自动浏览器自动换行，以便我可以在文本达到 4 行时找到文本位置并剪切下一行？ 有什么建议使用 Javascript 操作 DOM 或使用 PHP 帮助计算文本行长度吗？

Answer 1

使用 overflow:hidden 怎么样？

假设您的 font-size 为 12px，line-height 为 16px。

4 lines * 16px = 64px

.hide-extra-lines {
    height: 64px;
    overflow: hidden;
}

这就是你所追求的吗？

Answer 2

1）您可以在服务器上测量文本的大小并且相当准确。我已经在 Windows 机器上使用 GDI+ 完成了此操作；不确定您可以访问哪些操作系统或库。

2) 您可以在客户端上使用等宽字体，并根据容器的宽度和字长检测文本何时换行。然后，您可以截断文本。

3）您不能在客户端使用等宽字体，仍然使用脚本进行猜测，并使用overflow:hidden捕获任何溢出的文本。