Geek Answers Handbook

Font overflows from text input in Chrome

I'm having a problem with a font causing "text overflow" on input elements in Chrome. Here is the JSFiddle I created:

http://jsfiddle.net/13e5q8Lf/2/

I tried using properties overflow-xand something else, but that does not affect it. Is there a way I can stop these extra tails from appearing, or is it just a Chrome bug that hasn't been fixed yet?

+4
source share
3 answers

Try to remove the marker from the input and give an overflow: hidden to the closing div http://jsfiddle.net/dvjkh7xs/

<div style="overflow:hidden">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</div>

. , div. : .

<span style="overflow:hidden; display:inline-block">
<input style="padding: 0; margin:0; font-size: 100px;" type="text" />
</span>
+3

. 37, , .

+1

I would venture to suggest that this is also related to the font. Try typing “Lj” in upper case L lower case j in the field. The left curl "j" also falls under the "L".

I would add:

text-indent: .2em;

in the input field. This would make characters other than 'j' slightly indented on the left, but I doubt that the user will stop using your site just because there are several spaces on the left in the input field :)

+1
source

More articles:


All Articles