CODEWITHSUNDEEP
css
Yaakov Shoham
Yaakov Shoham

Reputation: 10538

How to strongly force line-height in css, with no stretches?

How can I force line height in CSS, in such way that no big letters will stretch the line height. Instead, they should clip under the above line, or even merge with the above line.

CSS line-height seems to work like MS Word’s “at least” line height option by default. I want to make it work like MS Word’s “exactly” option.

For example:

There, the lines aren't the same height, because one line has some bigger letters in it. I want all lines to be the same height regardless.

Upvotes: 7

Views: 4877

Answers (4)

Giona
Giona

Reputation: 21114

Glyphs (the visual representations of a character) are centered vertically within an inline box. If the line height is larger than the content height, half the difference is added as space at the top; the same amount is also added at the bottom.

That's the case for the main, non bold, text in your example.

When set on a non-replaced inline element, it specifies the height used to calculate the height of the surrounding line box.

So in the bold text, you'll still have 8.5px above the font-size, which causes the issue.

You can prevent it by setting a line-height smaller than the font-size ( check this demo ). As it's an inline element, and there's no overflow:hidden; it will still be enterely visible, but it won't add any pixel to the rest of the text's line height.

As far as i know, it's not possible to "stretch" the letters, unless you use some CSS3 properties like transform:scale(value) etc.

Reference

Code:

<p>ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac <b>ac</b>
ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac ac</p>

​ CSS:

p {
    line-height:17px;        
    font-size:15px;
    width:150px;
}
b {
    font-size:25px;
    line-height:1px; 
}​

Upvotes: 8

Aaron Jones
Aaron Jones

Reputation: 183

Not sure if this is what your after but this will cut any text that is large than the line-height.

b {
    display:inline-block;
    overflow:hidden;
    vertical-align:top;
   }

Upvotes: 2

JasonGroulx
JasonGroulx

Reputation: 81

Maybe add 

display:inline-block;
height:13px;

to the b tag

Upvotes: 2

Eric
Eric

Reputation: 65

No way. You can think about enlarge the line-height, for example 30px, and you will get the same height all the lines.

Upvotes: -1

Related Questions