7

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.

4 Answers 4

8

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; 
}​
3
  • Although that won’t work if b gets too big, e.g. jsfiddle.net/mM4tR/3 (I don’t quite understand why though.) Commented Sep 28, 2012 at 15:48
  • 2
    @PaulD.Waite because b in your example is 50px high (rest of the text: 15+17 = 32px). In this case, you can add display:inline-block; but it will cover bottom text (jsfiddle.net/gionaf/3rQjt), which i don't think is what OP wants...
    – Giona
    Commented Sep 28, 2012 at 15:53
  • gotcha, that’s helped make it more understandable. Commented Sep 29, 2012 at 12:48
2

Maybe add

display:inline-block;
height:13px;

to the b tag

2

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;
   } 
1
  • Even without display:inline-block; overflow:hidden; it works. And it works also with bottom and not just for top. Commented Oct 3, 2012 at 16:04
-1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.