当添加字母间距时，50%的内容超过一半内容。

Question

我有一个显示五星的代码：

​

@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;
}

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

​

星体用letter-spacing分离

letter-spacing: 10px;

我想高亮2颗半星，所以我使用width: 50%。但这50%并不完全是在恒星的中间。当我删除letter-spacing时，50%看起来是正确的。我如何更改它，使50%与letter-spacing是正确的

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。你可以试着证明你的理由：

​

@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;
}

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

​

Answer 3

你可以给出宽度如下，

• 0.5 ->宽度: calc(10% ~5 5px)；
• 1.0 ->宽度: calc(20% ~5 5px)；
• 1.5 ->宽度: calc(30% ~5 5px)；
• 2.0 ->宽度: calc(40% -5 5px)；
• 2.5 ->宽度: calc(50% ~5 5px)；
• 3.0 ->宽度: calc(60% ~5 5px)；
• 3.5 ->宽度: calc(70% ~5 5px)；
• 4.0 ->宽度: calc(80% -5 5px)；
• 4.5 ->宽度: calc(90% -5 5px)；
• 5.0 ->宽度: calc(100% ~5px)；

或者在css下面添加跨度，

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