如何在文本输入字段中不带空格的情况下获得最后一个字母? [英] How to achieve the last letter without letter-spacing in a text input field?

查看:43
本文介绍了如何在文本输入字段中不带空格的情况下获得最后一个字母?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

尊敬的社区成员,

我有一个小问题,涉及一个带有字母间距的文本输入字段.例如下面的代码:

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"/>

由于最后一个字母的最后一个字母间距,这将导致文本无法正确居中.是否有其他方法可以实现间距以及文本居中功能?感谢所有解决方案(包括javascript和JQuery).

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).

(用户输入的字符串长度为6个字符,没有空格.)

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

感谢您的回复!

PS:我认为我没有忘记任何相关代码,因为em也可以替换为10px.我在这里有一个屏幕截图: http://www2.picturepush.com/photo/a/7889005/640/7889005.png

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

推荐答案

添加 1em padding-left 怎么样?

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

下面是一个示例,其中删除了 maxlength ,并添加了宽度,因此您可以看到它正确居中:

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/

注意:这似乎只是某些浏览器的问题.令人震惊的是,IE似乎正确地离开了多余的空格,除非有相邻的字符.您可能需要执行一些特定于浏览器的代码.

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.

这篇关于如何在文本输入字段中不带空格的情况下获得最后一个字母?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆