html - 右对齐文本带字母间距

Question

如果您在输入中左对齐文本，无论您如何设置字母间距，它都会保持左对齐。如果您在输入中右对齐文本，则字母间距可以将其推离右边缘。示例（显示在 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（我可以使用：shadow DOM，目前没有太多浏览器）。您还可以使用WebComponentsMonkeyPatch来保证实现的未来。

Jsfiddle 示例。

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

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