Question

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:

• http://jsfiddle.net/DUpgN/

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.

Answer 1

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; 
}​