如何删除CSS中元素的最后一个字母的字母间距？

Question

这是我的HTML页面中的图像。 文本菜单位于右对齐的div内，并具有1.2em字母间距。 这有伪选择器吗？我不想采取相对定位。

我希望文本菜单能够在块结束的地方结束。

我已经标记了最佳答案，但无论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;
}

Answer 1

您可以将元素设置为具有-1.2em的右边距，这将抵消字母间距。

e.g。

.menu-header-selector {
  display:block;
  letter-spacing:1.2em;
  margin-right:-1.2em;
  text-align:right;
}

要回答关于伪选择器的问题，据我所知，没有每个字符的伪选择器。 （编辑：从头开始，有:First-Letter选择器，Jonas G. Drange指出了这一点。）

编辑：您可以在此处找到基本示例：http://jsfiddle.net/teUxQ/

Answer 2

实际上，我会称之为浏览器错误。 spec表示字符之间的间距，而您的浏览器（和我的）似乎正在更改字符之后的间距。您应该提交错误报告。

Answer 3

您无法定位最后一个字符，只能定位第一个字符（CSS3，：first-letter）。您可以在最后一个字母周围添加一个范围，但这意味着添加无意义的标记，这比向元素添加定位“更糟糕”。

CSS非常适合这样的技巧：）

Answer 4

无需将显示更改为任何其他类型（<p>段落示例），也无需对我的代码进行任何不必要的操作。文字缩进设置为负的字母间距值可以为我解决该问题。

text-indent: -2em;的工作方式完全符合我对letter-spacing: 2em;的要求，并且是我唯一需要添加到CSS中的东西。

Answer 5

您可以在元素中添加一个：after，并设置一个与字母间距相等的负空白

.menuheader {
  letter-spacing: 1.1em;
}
    
.menuheader:after {
   content:" ";
   margin-left:  -1.1em;
}

在Chrome，Firefox和Edge上进行了测试

Answer 6

显然是一个非常老的问题，但是当时您的特定示例所涉及的CSS起作用了。

它涉及将方向重置为相反方向，为内联元素提供格式设置上下文，并设置等于字母间距的负文本缩进。

下面的演示

.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>

Answer 7

您可以尝试在文本上添加display：块，然后使用100％减去字母间距来减小宽度。

.menuheader {
 text-align: right;
 display: block; 
 letter-spacing: 1.1em; 
 width: calc(100% - 1.1em);
}