检查 标签将占用多少行答案

【问题标题】：Check how many lines will a tag occupy检查 标签将占用多少行
【发布时间】：2012-01-30 20:35:30
【问题描述】：

我在徘徊，有没有办法检查标签中的文本在被包装后会占用多少行？我知道包含此 的<div> 的宽度和高度。

当我尝试剪切超过 3 行的文本并使其稍后可扩展时，出现了这个问题。我知道我可以通过切割固定长度的文本（一行中的平均符号数）来实现这一点。但我只是在徘徊:)

【问题讨论】：

【解决方案1】：

如果您对字体大小、行高和高度使用相对单位，您实际上不需要知道文本长多少像素：请参阅这个小提琴 - http://jsfiddle.net/6WRsg/

我设置了line-height: 1.3和height: 3.9em /* (1.3 * 3 lines) */；所以不管字体大小是多少，你总是最多显示三行文本。

当您需要显示所有内容时，只需以编程方式（通过 javascript）将高度切换为 auto

【讨论】：

【解决方案2】：

您可以使用 position:absolute, left:-2000px 将 para 临时放置在可见页面之外数英里处，然后检查它的 offsetHeight 以了解它将有多少行。不知道如何找到确切的换行符。

【讨论】：