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

Question

如果您在输入中保留对齐文本，则无论您如何设置字母间距，它都会保持左对齐。 如果右对齐输入中的文本，则字母间距可以将其从右边缘推开。 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;
}

有没有办法在保持完全右对齐的同时增加字母间距？

Answer 1

您可以在支持它的浏览器中使用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;
}

Answer 2

你可以破解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

除了这种怪异之外，我认为还有另一种方法可以做到这一点。如果将来的浏览器决定根据文本的对齐方式放置间距

，这种黑客将会适得其反