如何删除 CSS 中元素最后一个字母的字母间距？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6949836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I remove letter-spacing for the last letter of an element in CSS?
提问by desbest
Here's the image in question of my HTML page. The text menu is inside a right aligned div, and has 1.2em letter spacing. Is there a pseudo-selector for this? I would not like to have to resort to relative positioning.
这是我的 HTML 页面有问题的图像。文本菜单位于右对齐的 div 内，字母间距为 1.2em。是否有一个伪选择器？我不想诉诸相对定位。
I would love the text menu to end where the block ends.
我希望文本菜单在块结束的地方结束。
I've already marked a best answer, but I was asked for the markup regardless by CodeBlock. Here it is.
我已经标记了最佳答案，但无论 CodeBlock 还是要求我提供标记。这里是。
<div class="sidebar">
<span class="menuheader">MENU</span>
<ul>
<li><a href="#content">Content</a></li>
<li><a href="#attachments">Attachments</a></li>
<li><a href="#subpages">Sub-pages</a></li>
<li><a href="#newsubpage">New sub-page</a></li>
</a></ul>
</div>
.sidebar{
color: rgb(150,93,101);
display: inline;
line-height: 1.3em;
position: absolute;
top: 138px;
width: 218px;
}
.menuheader{
letter-spacing: 1.1em;
margin: -1.2em;
text-align: right;
}
回答by Karl Nicoll
You can set your element to have a right margin of -1.2em, which would counteract the letter spacing.
您可以将元素设置为 -1.2em 的右边距，这会抵消字母间距。
e.g.
例如
.menu-header-selector {
display:block;
letter-spacing:1.2em;
margin-right:-1.2em;
text-align:right;
}
To answer your question regarding pseudo-selector, there isn't a per character pseudo-selector as far as I'm aware. (EDIT: Scratch that, there's the :First-Letterselector, which Jonas G. Drange pointed out).
要回答您关于伪选择器的问题，据我所知，没有每个字符的伪选择器。（编辑：从头开始，有:First-Letter选择器，Jonas G. Drange 指出）。
EDIT: You can find a basic sample here: http://jsfiddle.net/teUxQ/
编辑：您可以在这里找到一个基本示例：http: //jsfiddle.net/teUxQ/
回答by LaC
回答by Jonas G. Drange
You cannot target the last character, only the first (CSS3, :first-letter). You can add a span around the last letter, but that would mean adding meaningless markup which is "worse" than adding positioning to the element.
您不能以最后一个字符为目标，只能以第一个字符为目标（CSS3, : first-letter）。您可以在最后一个字母周围添加一个跨度，但这意味着添加无意义的标记，这比向元素添加定位“更糟糕”。
CSS is perfect for trickery like this :)
CSS 非常适合这样的诡计:)
回答by G-Cyrillus
Obviously a very old question, but CSS involved for your specific example worked at that time.
显然是一个非常古老的问题，但当时涉及您的具体示例的 CSS 有效。
It involves to reset direction to the opposite, give a formating context to your inline element and set a negative text-indent equal to the letter spacing.
它涉及将方向重置为相反的方向，为您的内联元素提供格式上下文，并设置一个与字母间距相等的负文本缩进。
Demo below:
演示如下：
.sidebar {
color: rgb(150, 93, 101);
line-height: 1.3em;
width: 218px;
border:solid;
text-align:right;
}
.menuheader {
letter-spacing: 1.1em;
direction:rtl;
display:inline-block;
text-indent:-1.1em;
background:gold
}<div class="sidebar">
<span class="menuheader">MENU</span>
<ul>
<li><a href="#content">Content</a></li>
<li><a href="#attachments">Attachments</a></li>
<li><a href="#subpages">Sub-pages</a></li>
<li><a href="#newsubpage">New sub-page</a></li>
</ul>
</div>