添加字母间距时，50％的百分比超过一半

Question

我有这个显示五颗星的代码：

＆＃13;

＆＃13;

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
.score {
  display: inline-block;
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  color: #dcdcdc;
  position: relative;
  letter-spacing: 10px;
}
.score {
  border: 1px solid #000;
}
.score::before,
.score span::before{
  content: "\f005\f005\f005\f005\f005";
  display: block;
}
.score span {
  color: #FFD700;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

＆＃13;

<span class="score" data-toggle="tooltip" title="5 Bewertungen | Durchschnitt: 4.6 Punkte">
  <span style="width: 50%"></span>
</span>

＆＃13;

＆＃13;

＆＃13;

使用letter-spacing分隔星星：

letter-spacing: 10px;

我想要突出2星半，所以我使用width: 50%。但50％并不完全处于明星中间。当我删除letter-spacing时，50％看起来是正确的。如何更改它，以便使用letter-spacing确定50％是正确的？

Answer 1

删除字母间距，并在每个星形之间添加一个空格，如下所示：

https://jsfiddle.net/39y4ctkg/

.score::before,
.score span::before{
  content: "\f005\00a0\f005\00a0\f005\00a0\f005\00a0\f005";
  display: block;
}

Answer 2

那是因为letter-spacing在最后一个字母后添加了空格：

这是blatant violation of the spec。你做得很好。当浏览器修改其实现以匹配规范时，您的代码将按预期工作。

您可以尝试抵消该错误，但是当浏览器实现正确的行为时，它可能会中断。所以我建议避免letter-spacing。你可以试试理由：

＆＃13;

＆＃13;

@import 'https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css';
.score {
  display: inline-block;
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  text-decoration: none;
  color: #dcdcdc;
  position: relative;
}
.score {
  border: 1px solid #000;
}
.score::before,
.score span::before{
  content: "\f005  \f005  \f005  \f005  \f005";
  display: block;
  width: 7em;
  text-align: justify;
  text-align-last: justify;
}
.score span {
  color: #FFD700;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

＆＃13;

<span class="score" data-toggle="tooltip" title="5 Bewertungen | Durchschnitt: 4.6 Punkte">
  <span style="width: 50%"></span>
</span>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以给出如下宽度，

• 表示0.5 - >宽度：计算（10％ - 5px）;
• for 1.0 - ＆gt; width：calc（20％ - 5px）;
• 表示1.5 - >宽度：计算（30％ - 5px）;
• for 2.0 - ＆gt; width：calc（40％ - 5px）;
• for 2.5 - ＆gt; width：calc（50％ - 5px）;
• for 3.0 - ＆gt; width：calc（60％ - 5px）;
• for 3.5 - ＆gt;宽度：计算（70％ - 5px）;
• for 4.0 - ＆gt; width：calc（80％ - 5px）;
• for 4.5 - ＆gt;宽度：计算（90％ - 5px）;
• for 5.0 - ＆gt; width：calc（100％-5px）;

或者在下面添加css作为范围，

.score span{
  box-sizing: border-box;
  border-right: 5px solid transparent;
}