检查一下< p>标签占据 [英] Check how many lines will a <p> tag occupy

问题描述

我在游荡，是否有办法检查< p> 标签中的文本在包裹后会占用多少行？我知道宽度&包含此< p> 的高度< div> 。

I was wandering, is there a way to check how many lines will a text in a <p> tag occupy after beeng wrapped? I know the width & height of <div> that contains this <p>.

这个问题在我试图剪切文本的时候出现了，如果它长度超过3行，并且稍后可以扩展。我知道我可以通过剪切具有固定长度的文本（平均符号数在一行中）来实现此目的。但是我只是在漫游：）

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. I know I can achieve this by cutting the text with fixed length (average symbol count in a line). But I was just wandering :)

推荐答案

实际上，如果您使用文本，字体大小，行高和高度的相对单位：请参阅此小提琴 - http://jsfiddle.net/6WRsg/

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/

我设置了一个 line-height：1.3 和 height：3.9em / *（1.3 * 3行）* / ;所以无论字体大小如何，您总是最多显示三行文本。

I set a line-height: 1.3 and height: 3.9em /* (1.3 * 3 lines) */; so no matter what the font-size is, you always display at most three lines of text.

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

When you need to show all the content just switch programmatically (via javascript) the height to auto

这篇关于检查一下< p>标签占据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！