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

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

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