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

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.

score 8 · Accepted Answer · answered Sep 28 '12 at 15:38

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

Although that won’t work if `b` gets too big, e.g. http://jsfiddle.net/mM4tR/3/ (I don’t quite understand why though.) — Paul D. Waite, Sep 28 '12 at 15:48
@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 (http://jsfiddle.net/gionaf/3rQjt/), which i don't think is what OP wants... — Giona, Sep 28 '12 at 15:53

score 1 · Answer 2 · edited Sep 28 '12 at 15:14

1

Maybe add

display:inline-block;
height:13px;

to the b tag

edited Sep 28 '12 at 15:14

Baz

36,440
11
68
94

answered Sep 28 '12 at 15:10

JasonGroulx

71
1
1
8

score 1 · Answer 3 · answered Sep 28 '12 at 15:33

1

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

answered Sep 28 '12 at 15:33

Aaron Jones

173
1
5

Even without `display:inline-block; overflow:hidden;` it works. And it works also with `bottom` and not just for `top`. – Yaakov Shoham Oct 03 '12 at 16:04

score -1 · Answer 4 · answered Sep 28 '12 at 15:01

-1

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

answered Sep 28 '12 at 15:01

Eric

65
1

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

4 Answers4

Linked