<input> 中的文本与字母间距右对齐答案

【问题标题】：Right align text in <input> with letter-spacing<input> 中的文本与字母间距右对齐
【发布时间】：2014-07-24 02:44:00
【问题描述】：

如果您在输入中左对齐文本，无论您如何设置字母间距，它都会保持左对齐。如果您在输入中右对齐文本，则字母间距可以将其推离右边缘。 Example (shows up in Firefox, Chrome):

<input class="left" value="spacing" />
<input class="right" value="spacing" />

CSS：

input {
    font-size:24pt;
    letter-spacing: 20px;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}

有什么方法可以增加字母间距同时保持完全右对齐？

【问题讨论】：

我不明白这个问题，你已经有字母间距和右对齐，你的问题是什么？
@Huangism 检查右边20px的图片。
间距被添加到字母的右侧，所以它看起来好像没有右对齐。
我读过的所有内容都表明由浏览器决定如何应用间距。看起来 Firefox 只是将它添加到字母的右侧。至少在具有该间距集的所有输入中都是一致的。
由于 input 标签不支持特定字符的样式，我认为唯一的方法是构建一个特殊的自定义富文本控件，它完全符合您的要求。

标签： html css letter-spacing right-align

【解决方案1】：

你可以为 Firefox 破解它

http://jsfiddle.net/LF7UU/6/

<input class="right" value="gnicaps" />

CSS

.right {
    text-align:right;
    unicode-bidi:bidi-override;
    direction:rtl;
}

https://developer.mozilla.org/en-US/docs/Web/CSS/direction

我认为除了这个怪物之外没有其他方法可以做到这一点。如果将来的浏览器决定根据文本的对齐方式放置间距，那么这种 hack 会适得其反

【讨论】：

哈哈！多么棒的黑客攻击！
小心这个。 value 是物理反转的，因此您必须进行一些特殊的解析以在数据发布时重新反转数据。如果动态加载到 input 中，您还必须反转该值。
我错过了什么吗？您的小提琴看起来与 OP 的完全相同。我看到字母 g 右侧有 20 像素。我正在使用 Chrome v35。
我看到与@lbstr 相同的内容，当我在框中键入时，它被反转了。用户键入时是否应该有JS来反转输入？
没有js，根据developer.mozilla.org/en-US/docs/Web/CSS/direction应该支持chrome。你可以去FF看看。显然，chrome无论如何都会将空间放在右侧。黑客就是黑客！

【解决方案2】：

您可以在支持它的浏览器中使用 Javascript 和 shadow DOM（Can I use: shadow DOM，目前浏览器不多）。您还可以使用WebComponentsMonkeyPatch 来保证实现的未来。

Jsfiddle sample.

JS：

var button = document.querySelector('input.right');
var shadowDom = button.webkitCreateShadowRoot();
shadowDom.innerHTML = '<div style="margin-right: -20px;">'+button.value+'</div>';

HTML：

<input class="left" value="spacing" />
<input class="right" value="spacing" />

CSS：

input {
    font-size:24pt;
    letter-spacing: 20px;
    width: 70%;
}
.left {
    text-align:left;
}
.right {
    text-align:right;
}

【讨论】：