Bottom few pixels of text cut off

Question

I really can't figure out what's going on in this case. On the multiline pieces of text, the bottom few pixels are cut off.

Looks fine to me on Firefox. Which browser are you seeing this problem in? — BoltClock, Oct 13 '11 at 20:43
http://i51.tinypic.com/n6faqg.png Letters like g and y, with bottoms that extend past a certain point. — Reece McMillin, Oct 13 '11 at 20:49
Only on the second line, by the way. The first line is fine. — Reece McMillin, Oct 13 '11 at 20:51
Please don't post a live link to your code or your question will become obsolete as long as you fix this. Instead, try to reproduce the issue with a narrowed down code in a fiddle or so and also place the code here in order to make your question "standalone" — Laurent S., Aug 21 '15 at 13:37

score 73 · Answer 1 · answered Dec 03 '12 at 17:54

73

Setting

line-height: normal;

Worked for me.

answered Dec 03 '12 at 17:54

C.M.

1,474
13
16

1

@Reece You should accept this answer so it gets more visibility. It solved my problem – Akin Hwan Sep 25 '19 at 22:02

score 3 · Answer 2 · answered Aug 21 '15 at 13:33

3

Changing font-size and font-family is just a workaround. I had same issue. It works well in Firefox however not in Chrome. Check padding or margin of the input box. It was padding in my case. I changed padding:6px to padding:0px 6px; in my case.

answered Aug 21 '15 at 13:33

Tushar Shukla

5,666
2
27
41

score 2 · Accepted Answer · answered Oct 13 '11 at 20:55

2

The quickest fix looks to be this:

Change the font-size here from 14px to 13px

#slidertext h3 {
font-size: 13px;
// other styles
}

Works for me in Chrome.

answered Oct 13 '11 at 20:55

Jason Gennaro

34,535
8
65
86

Using this. Text still looks nice, and doesn't have any complications. Also allows for longer submissions without added complications in the future. Thanks. – Reece McMillin Oct 13 '11 at 21:01
14

this doesn't actually fix the problem, which is a line-height issue. As noted below setting `line-height: normal;` is the fix – bdanin Aug 29 '16 at 14:21

score 1 · Answer 4 · answered Sep 19 '22 at 22:42

1

Try applying line-height to the paragraph so it fits whatever font-size you are trying to set. In my case font-size was 14px, so I set line-height to 15px.

answered Sep 19 '22 at 22:42

KhanAJ

11
4

score 1 · Answer 5 · answered Oct 13 '11 at 20:58

1

On #slidertext li you have overflow: hidden; set. You either need to adjust height of the li, you have inline styles setting it to height: 32px, turn off overflow, or adjust the font size inside of there.

answered Oct 13 '11 at 20:58

Doozer Blake

7,677
2
29
40

score 0 · Answer 6 · answered Apr 12 '19 at 22:14

As per specific Browsers this kind of issue is related to the Font Family, very often. My solution for text being cut off is to change the font family to sans-serif and see if this has any effect. This worked infallibly on any browser I tried it in.

As from what the other threads above are stating... it just might help to adjust line-height and padding, sometimes, but for me, none of these worked in general:

max-width: 100%;
min-height: 1.62em;
padding: 2px 5px 2px 5px;    
vertical-align: initial;

font-family: initial, sans-serif, serif; is a good starting point and then you can find a font that plays nice with your theme/site.

score 0 · Answer 7 · answered Dec 12 '19 at 08:12

0

This fix mine:

letter-spacing: normal;

answered Dec 12 '19 at 08:12

MIA

373
3
18

score 0 · Answer 8 · answered Feb 10 '21 at 16:09

0

For me it was font-kerning. Its default value is auto which means it is using kerning information stored in a font. I changed it to normal and it fixed the issue.

input {
  font-kerning: normal;
}

answered Feb 10 '21 at 16:09

max

8,632
3
21
55

score 0 · Answer 9 · answered Apr 21 '21 at 00:22

Most of the cases, if font is cutting off from the bottom, it's means, we are using, please try below if this helps overflow:hidden;

For fixing this issue, please use,

overflow-x:hidden;
line-height: according to your style-guide (1/1.5//normal);

// You can increase and decrease line depending on your style-guide)

.

score -1 · Answer 10 · answered Oct 13 '11 at 20:56

Check the size of the sliderwrap, the height attribute may be in conflict with the total text size, and since your overflow is hidden, according to your css property, that might be your issue.

Perhaps fixing it like this:

#sliderwrap
{
    height:114;
}

Bottom few pixels of text cut off

10 Answers10

Linked