CODEWITHSUNDEEP
overflowcss
pingu
pingu

Reputation: 8827

Text cropping when using overflow: hidden

i have this simple html and css http://jsfiddle.net/JVfVv/1/

Problem is the text is being cropped under safari/chrome/firefox on mac. Removing overflow: hidden corrects the problem, however this line is necessary for other reasons. Removing line-height: 1; appears to fix the problem, however i get this from my reset stylesheet, and I don't understad why having it causes a crop.

Can someone explain why this is happening, and how to fix it please? thanks

Upvotes: 16

Views: 14021

Answers (4)

Nigh7Sh4de
Nigh7Sh4de

Reputation: 455

overflow: "clip",
overflowClipMargin: "2px",

Use clip instead of hidden to gain access to the overflowClipMargin. You can add a bit of margin that won't affect the element's layout, but will allow more of the content to be visible before overflow is hidden.

Upvotes: 0

Cvuorinen
Cvuorinen

Reputation: 1319

Bit of a hack, but applying padding-bottom and then countering the effect with negative margin-bottom seems to work pretty well.

The size of the required padding depends on the font-size as well as used font, but I used 0.3em and it seems to work pretty well at least with the font we are currently using.

div {
  overflow: hidden;
  line-height: 1;
  margin-bottom: -0.3em;
  padding-bottom: 0.3em;
}
<div>testing...</div>
<div>yjqgp</div>
<div>YJQGP</div>

Upvotes: 0

Cheran Shunmugavel
Cheran Shunmugavel

Reputation: 8459

To answer the question of why this happens, I think the key is this particular phrase from the Fonts section of the CSS 2.1 spec (emphasis mine):

The font size corresponds to the em square, a concept used in typography. Note that certain glyphs may bleed outside their em squares.

The line-height: 1 declaration sets the height of the paragraph to the same height as the font-size (since the paragraph only has one line). The fact that some characters are cut off implies that their glyphs bleed outside their em squares (I don't know how to definitively prove that this is true; I'm just speculating based on the evidence).

As for a solution, the most straightforward solution would be to use a larger line-height setting, such as 1.1 or 1.2.

Upvotes: 27

Ropstah
Ropstah

Reputation: 17804

You can set the height in CSS which solves the problem?

p {
    line-height: 1;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial; font-size: 30px;
    height:32px; /* this appears to solve the problem */
}​

See: http://jsfiddle.net/JVfVv/4/

Upvotes: -1

Related Questions