CSS - 取消最后一个字母的额外空间
我只是想知道是否有一个很好的干净的方式来抵消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％的中心。 请参见： 
但是，删除字母间距，它就像人们期望的那样。 所以对我来说有一个问题..
这里是相同的例子，但没有设置字母间距： 
更新
我对这个问题有了更好的认识，因此我正在更新这个问题以使其更加合理，并将问题总结得更好。
好吧，所以大量播放问题后，letter-spacing会在每个字母的右侧添加间距，包括最后一个字母，因此我得到这个问题。 所以，为了否定这一点，我将尝试简单地使用margin-right: -(width of my letter spacing) 。 我不确定这是否会引起问题，但它又是另一个选择，我可以在需要letter-spacing的元素周围包裹这些元素，但这对我来说太难看了。
所以我的更新CSS看起来像这样：
h1{ letter-spacing: 20px; margin-right: -20px; }
这个问题确实源于使用字母间距。 根据标准，当你增加字母间距时，布局引擎认为字母后面的额外空间是字母宽度的一部分。 因此，您在右侧看到的额外空间在某种程度上是您要求的。
看起来你想要的是字母间距将实际字母放在中间，并在两侧用letter-spacing / 2包围每个字母。 但我不确定这是CSS的一项功能。 事实上，字母间距算法是依赖于用户代理的，所以这可能在不同的浏览器上以不同的方式工作。
所以你只剩下一些方法来解决这个问题，比如添加-1em右边距/填充，但可能没有“真正的”解决方案。
好的，所以实际上它不是问题。 你的中心元素是100％的宽度，所以实际上文本会落在侧面的2列之后。
以表明我厌倦了减少这里的边界元素的不透明度
当你真正给中心留出余地时 - 它在这里解决你的问题
.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;
}
最终DEMO
我已经编辑了你的CSS，并增加了左右边距： CSS：
.centered--element{
background: #f2f2f2;
text-align: center;
text-transform: uppercase;
margin-left:90px;
margin-right:90px;
}
另外我在DEMO中提到过，如何动态设置字母间距：
JS：
document.getElementById("myHeading").style.letterSpacing="15px";
希望这可以帮助。
链接地址: http://www.djcxy.com/p/78575.html上一篇: CSS — Negate additional space added to last letter by letter