<span>元素在单词

Question

我正在使用Angular4，我注意到这个非常奇怪的问题，其中一个span元素为这样一个单词的末尾添加了一个额外的空格：

设置的唯一CSS属性是font-family，-webkit-font-smoothing，line-height和box-sizing。

我尝试更改word-spacing和white-space属性，但这些也无效。我之前从未遇到过这个问题，所以任何建议都会有所帮助

Answer 1

尝试添加您的css：padding-right: 0px; display: inline-block;

Answer 2

在你的CSS中

，只需将display：inline-block放到span元素

即可

.key-ingredients span{
    display:inline-block;
}

Answer 3

发现它不是CSS问题，但实际上是模板代码中的换行符。

以前是代码：

<span *ngFor="let ingredient of keyIngredients; let i = index;">
    <span *ngIf="i > 0">,&nbsp;</span>
    <span *ngIf="i === keyIngredients.length - 1">and&nbsp;</span>
    <span [innerHTML]="ingredient"></span>
</span>

我删除了换行符并将所有跨度放在一行中以解决它。