CSS - 通过letter-spacing属性否定添加到最后一个字母的额外空间

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)。我不确定这是否会导致问题，但它会打败另一个选项，我可以在我希望拥有的元素周围包围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

Answer 2

这个问题确实源于使用字母间距。 According to the standard，当你增加字母间距时，布局引擎认为字母后面的额外空格是字母宽度的一部分。所以你在右边看到的额外空间在某种程度上就是你所要求的。

你想要的是字母间距将实际字母放在中间，并用字母间距/ 2围绕两边的每个字母。但我不确定这是CSS的一个功能。实际上，字母间距算法依赖于用户代理，因此在不同的浏览器上甚至可能以不同的方式工作。

因此，您可以通过各种方法解决此问题，例如添加-1em右边距/填充，但可能没有＆＃34; true＆＃34;溶液

Answer 3

我已经编辑了你的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";

希望这有帮助。

Answer 4

我已经制作了一个javascript函数来纠正这种行为。它采用匹配元素文本的最后一个字母并创建一个没有字母间距的跨度，然后补偿宽度，增加额外的边距（等于原始字母间距）。 您可能需要将其输入限制为叶节点，但它的效果非常好，特别是如果您需要为文本加下划线。

var fixLetterSpacing = function(selector) {
    $(selector).each(function() {
        var that = $(this);
        var text = that.text();
        var last = text.substr(-1);

        that.text(text.substr(0, text.length-1))
            .append($('<span>').text(last).css({ letterSpacing: 0 }))
            .css({ marginRight: that.css('letter-spacing') });
    });
};