Geek asks and answers

How to find the space between lines in HTML?

This is the next question to the previous question. I am trying to find a way to find the exact location of each line of text in an element.

I managed to find the css attribute lineHeight(see previous answer). The problem is that the height of my element is slightly larger than the cumulative height of the number of rows at a time lineHeight.

Example:

I have <p>one that has a height of 2010px without padding, border or field, ( scrollHeight, offsetHeightand clientHeighteveryone reports this) and has 89 lines in the browser. lineHeight computedStyle()equal to 22.

2010/22 = 91.37 rows

With small elements, I can simply set the value to get the correct number of rows, but I ran into the above problem with larger elements, where I cannot get the exact number of rows exactly.

My guess is that there is a small space between these lines of text that I do not take into account. Any idea how to find it? Are they related to font type? Is it automatically installed by the browser? Any documentation would be especially helpful.

Thank!!

Update:

So, I have 26 superscripts in mine <p>, each of which produces 2px, expanding lineHeightthe lines on which they display 24px, which explains my missing space. (Woot! Thanks, bye!)

, , , , , , , <sup> . ( a <sub>.) , CSS?

+5
2

, - , , , line-height. , "" ( ) , /- , .

+1

, @lanzz - .

:

div {
 font-size: 10px;
 line-height: 10px;
 height:30px;
 margin-top: 0px;
 margin-bottom: 0px;
 border: 0px;
 overflow-y: hidden;
 padding: 0px;
}

3 . , - -, . , 3 .

: http://jsbin.com/ogoruy/4/

" ":

, , " ".

"line-height" , ( , ..), , , "-".

http://www.w3.org/TR/CSS2/visudet.html#line-height

+2

More articles:


All Articles