CODEWITHSUNDEEP
javascripthtmlcss
Snowflake
Snowflake

Reputation: 3081

How to achieve the last letter without letter-spacing in a text input field?

Dear community members,

I have a small problem, which involves a text input field with letter-spacing. For example the following code:

<input type="text" style="letter-spacing:1em; text-align:center;" maxlength="6" id="code" name="code" />

This would cause the text not center properly due to the last letter-spacing at the last letter. Are there alternative methods in which I can achieve spacing, but also text centering capabilities? All solutions are appreciated (incl. javascript and JQuery).

(The user enters a string of 6 characters long, with no spaces.)

Thanks for the response!

PS: I do not think that I forgot any relevant code, because the em can also be replace with 10px. I have a screenshot here: http://www2.picturepush.com/photo/a/7889005/640/7889005.png

Upvotes: 2

Views: 2690

Answers (1)

Jeff B
Jeff B

Reputation: 30099

What about adding a padding-left of 1em?

<input type="text" style="letter-spacing:1em; text-align:center; padding-left: 1em" maxlength="6" id="code" name="code" />

Here is an example, with the maxlength removed and a width added, so you can see that it is centered properly:

http://jsfiddle.net/Jgm42/

Note: This looks to only be an issue with some browsers. IE, shockingly, seems to correctly leave off the extra spacing unless there is an adjacent character. You might have to do some browser-specific code.

Upvotes: 8

Related Questions