Right Aligned Italic Text in textbox cut off

Question

I have a few textboxes that are read-only. I've made that text italic but for numeric fields where I've also right aligned the text the last number gets cut off. Adding padding only makes the textbox larger but doesn't fix the issue as you can see in the image (Total Cost has about 20px padding and Cost only has 5px). How can i fix this other than just getting rid of the italic text? I've searched and haven't found anything addressing this so if you have a link somewhere i'd be happy to check it out.

This isn't browser specific so it happens across the board , Chrome is the one used for the image above and has the most noticeable change. When the page first loads it is displayed correctly, nothing cut off. This is part of a form, so once you chose another option from a dropdown the text within these read-only boxes changes, that's when the issue takes place. Almost as if it was changing the styling when a new option was chosen. I haven't noticed any style changes, nor class changes or anything in the code. Could be overlooking something but nothing has stood out so far.

Here is a jsFiddle: jsfiddle.net/mK6JK

This isn't fully styled the same as the issue but has the main styling classes added. Problem is that it looks fine on the fiddle. But still has the issue on my production version.

Dancette

This is messy, but add a couple of spaces at the end? – Orna

Perhaps adding an :after pseudeoelement with spaces or with display: inline-block; and some width. Some code and fiddle would be appreciated to test it in your example. – Registrar

I believe overflow: hidden; corrects this Link – Outrider

The space I was going to try but this is being generated dynamically and i dont want to introduce extra characters that will get the developers code (to steal your word) messy. I had changed the display and width but again, that just seemed to change the boxes size and not affect the text. Let me see about putting a fiddle together, all the code is pretty much in the description but i know that's not proper. – Dancette

is this happening on other browsers too? – Telegu

@Outrider Unless I'm putting it in the wrong place which i doubt i am then overlow:hidden does nothing. I found that "fix" online too but like i said it did nothing and i don't even notice a change in the link you sent. Looks like he's using the same image even after he "fixes" the issue or i'm not understanding his issue. Which is based on IE and a floated element which neither are part of my problem but thanks for the link and the comment – Dancette

@Telegu doesn't seem to happen in IE. which is mind-blowing that IE didn't make things worse this time. and FF seems ok so does Chrome at times and then if any kind of change is made it goes back to being cut off. it's a weird bug so it's not so browser specific. Just want to see if anyone else has had this issue – Dancette

These tend to be part of a form. Usually with some select options, so it'll load correctly (not cutting off #'s) then when you choose an option from a dropdown the text will change of course to show the new values and that's when the last # ends up cut off. Chrome definitely seems to look the worst. That's what you see in the picture – Dancette

this looks like a overflow problem, like a text-overflow or something like this... – Telegu

@Rodney any luck getting a fiddle together? – Outrider

@Outrider i'm still working on it but this is really the main code for it. It's not fully styled but the issue should be here yet it looks fine. Even on my end it only happens when the values within the textbox are refreshed due to a new selection from the dropdown. I guess this is specific to what i have going on rather than a common bug. Here's the fiddle : jsfiddle.net/mK6JK – Dancette

You should include code for reproducing the issue in the question itself, possibly also mentioning a jsfiddle (in the question—this is not chat, and the question should be understandable and complete without checking the comments below it). You should also specify the browser(s) tested. As an aside, the problem is best avoided by not using italic for things like this. – Poncho

@JukkaK.Korpela thanks Jukka I'll put the fiddle and all of that up there soon. Just haven't had or taken the time right now sorry. And I dont mean to sound like a jerk but i know the problem can be avoided by not using italics that's pretty self-explanatory and not helpful in any way. but thanks. Chances are in the future i wont use italic. – Dancette

I have this problem too. It's now already 2017 and still there's no any workaround? Are any web-browser developers unaware of this issue until this very moment? It's embarrassing. – Lina

@TaufikNurRahmanda - here I am in 2020 – Inscription

Answer 1

You must add padding to the right side of the textbox.

<input type="text" class="classnum" />

And add CSS rule:

.classnum {
    text-align: right;
    font-style: italic;
    padding-right: 3px;
}

Gt

Answer 2

Please look into the below html & css. I am not getting any type of issue in any browser. Html

<input type="text" class="italic" value="1236" />

Css

.italic{
    font-style:italic;
    padding: 10px;
    text-align: right;
}

http://jsfiddle.net/SqX75/

Donahue

Answer 3

i had a similar problem but with <div> content. i just added width: 110% and it solved my problem. hope it'll be useful for somebody else.

Thant

Answer 4

As far as I can tell, this is dependent on the browser and there isn't really a way to make it go away. The input field is a replaced element and the way it looks and behaves is affected by your OS+browser combination.

One possible work-around is to set the letter-spacing property on the input element to about 2 or 3px. This will of course space out all characters. Depending on your font and design, this might not look that awful

What I ended up doing was to ensure a space was always added at the end via Javascript, when the field changed.

Hunnicutt