如何纠正 mat-icon 阻止同级元素上的“文本转换”

Question

我有一个包含mat-icon. 它有条件地使用一个is-text类进行渲染，如果该类存在，我将text-transform按钮的属性从uppercaseto重写capitalize。然而，该capitalize属性并没有正确应用（在我看来）。也就是说，在下面的例子中我应该有：

过滤/排序

实际上渲染的是：

过滤/排序

标记：

<button class="button is-text">

  <mat-icon>close</mat-icon>

  <label class="label">

    <span class="span">filter/sort</span>

  </label>

</button>

社会保障体系：

.button {

  text-transform: uppercase;

  &.is-text {

    .label .span{

      text-transform: capitalize;

    }

  }

}

如果mat-icon删除，大写会正确呈现，但我不想这样做。

capitalize将属性仅应用于元素的正确方法是什么.span？

堆栈闪电战示例

Answer 1

添加display: inline-block到跨度可以解决问题。.button {&nbsp; text-transform: uppercase;&nbsp; &.is-text {&nbsp; &nbsp; .label .span{&nbsp; &nbsp; &nbsp; text-transform: capitalize;&nbsp; &nbsp; &nbsp; display: inline-block;&nbsp; &nbsp; }&nbsp; }}