如何纠正 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 {

  text-transform: uppercase;

  &.is-text {

    .label .span{

      text-transform: capitalize;

      display: inline-block;

    }

  }

}