简体繁体 English

检查多少行 <p> 标签占据

[英]Check how many lines will a <p> tag occupy

原文 2012-01-30 11:32:52 8 2 javascript/ html

I was wandering, is there a way to check how many lines will a text in a <p> tag occupy after beeng wrapped? 我在徘徊，有没有办法检查包裹后<p>标记中的文本将占用几行？ I know the width & height of <div> that contains this <p> . 我知道包含此<p>的<div>的宽度和高度。

This question came up when I was trying to cut a text if it's more then 3 lines long, and make it expandable later. 当我尝试剪切文本时，如果它的长度超过3行，并在以后使其可扩展，则会出现此问题。 I know I can achieve this by cutting the text with fixed length (average symbol count in a line). 我知道我可以通过以固定长度（一行中的平均符号数）剪切文本来实现此目的。 But I was just wandering :) 但是我只是在流浪:)

2 个解决方案

you don't actually need to know how many pixels the text is long if you use relative units for font-size, line-height and height: see this fiddle - http://jsfiddle.net/6WRsg/ 如果您使用相对单位的字体大小，行高和高度，则实际上不需要知道文本长多少个像素：请参见此小提琴-http: //jsfiddle.net/6WRsg/

I set a line-height: 1.3 and height: 3.9em /* (1.3 * 3 lines) */ ; 我设置了line-height: 1.3和height: 3.9em /* (1.3 * 3 lines) */ ; so no matter what the font-size is, you always display at most three lines of text. 因此，无论字体大小如何，您始终最多只能显示三行文本。

When you need to show all the content just switch programmatically (via javascript) the height to auto 当您需要显示所有内容时，只需以编程方式（通过javascript）将高度切换为auto

You could place the para temporarily miles outside the visible page with position:absolute, left:-2000px and then check its offsetHeight to get an idea of how many lines it will have. 您可以将para暂时放置在可见页面之外，位置为position：absolute，left：-2000px，然后检查其offsetHeight来了解它的行数。 Not sure how you'd find exact line breaks tho. 不确定如何找到确切的换行符。