CSS — 取消通过字母间距属性添加到最后一个字母的额外空间

Question

我只是想知道当您需要将文本居中时，是否有一种干净利落的方式来消除 letter-spacing 属性的小问题。请注意，为了最好地查看问题，请将 jsfiddle 预览窗口设置得足够小，以便文本换行成两行。

HTML

<div class="centered--element">
    <div class="center--line"></div>
    <h1>This is a example here</h1>
</div>

CSS

.centered--element{
    background: #f2f2f2;
    text-align: center;
    text-transform: uppercase;
}

/* problem property.. */
h1{ letter-spacing: 20px }

我这样做是为了说明问题:http://jsfiddle.net/tq3Gh/1/

也许这只是我，但它看起来并没有 100% 位于中心位置。请参阅:

然而，删除字母间距后，它就如人们所期望的那样。所以对我来说有一个问题..

这是同一个例子，但没有设置字母间距:

更新

我对问题有了更好的了解，因此我正在更新问题以使其更有意义并更好地总结问题。

好吧，在玩了很多次之后，问题是字母间距会在每个字母的右侧添加间距，包括最后一个字母，这就是我遇到这个问题的原因。所以，为了否定这一点，我将尝试简单地使用 margin-right: -(width of my letter spacing)。我不确定这是否会导致问题，但它胜过另一种选择，我可以将 span 包裹在我想要 letter-spacing 的元素周围——但这对我来说太丑陋了。

所以我的更新 CSS 看起来像:

h1{ letter-spacing: 20px; margin-right: -20px; }

Answer 1

好的，所以实际上这不是问题。您的中心元素是 100% 宽，因此实际上文本位于侧面 2 列的后面。

表明我厌倦了减少边元素的不透明度 here

当你真正给中心元素留出余量时，它就解决了你的问题here

.centered--element{
    background: rgba(0, 0, 0, 0.1);
    text-align: center;
    text-transform: uppercase;
    margin-left:90px;
    margin-right:90px;
}

最终解决方案

看来您需要将文本缩进与字母间距相同的量。第一个字母没有应用到左侧的间距

.spacing2 {
  letter-spacing:0.9em;
  text-align: center;
  text-indent: 0.9em;
}

Final DEMO