有没有办法让 angular 2/4 material 标签宽度基于标签的长度而不是切断？

Question

我正在使用 angular2 material，我遇到了一些问题，我的一些标签标题很长，这会切断标题文本末尾的图标。（一个小 x）。在我下面的代码中，请注意由于选项卡被切断，某些选项卡的右侧没有 x。有什么方法可以调整选项卡的大小以显示整个标签吗？

我不想做 limitTo 或减少标签标题的长度。

<md-tab-group>
  <md-tab>
    <ng-template md-tab-label>
        Name of a Tab 1
        <md-icon>close</md-icon>
    </ng-template>    
    Content 1
  </md-tab>
  <md-tab>
    <ng-template md-tab-label>
        The naming of tab is so long 2
        <md-icon>close</md-icon>
    </ng-template>    
    Content 1
  </md-tab>
  <md-tab>
    <ng-template md-tab-label>
        Name of a Tab 3
        <md-icon>close</md-icon>
    </ng-template>    
    Content 1
  </md-tab>  
  <md-tab>
    <ng-template md-tab-label>
        Name of a Tab 4
        <md-icon>close</md-icon>
    </ng-template>    
    Content 1
  </md-tab>  
  <md-tab>
    <ng-template md-tab-label>
        Long Name Of Some Tab 5
        <md-icon>close</md-icon>
    </ng-template>    
    Content 1
  </md-tab>    
  <md-tab>
    <ng-template md-tab-label>
        This is a special tab 6
        <md-icon>close</md-icon>
    </ng-template>    
    Content 1
  </md-tab>    
</md-tab-group>

我有一个 plunkr 可以说明我的问题： https://plnkr.co/edit/sjrZAiKg3ZdAq8xvGuPp?p=preview

如果这不可能，那也是可以接受的答案。

Answer 1

要解决您的问题，请将以下代码添加到应用根目录下的 styles.css 文件中：

.mat-tab-label {
    display: flex;
}

这是一个带有修复程序的 plunkr：

Angular 2 Material Demo for tab with close icon - Plunkr

Answer 2

如果您在 style.css 中编写 Accepted 代码，它将影响您应用的所有选项卡。如果你想使用它特定于组件，请事先编写 :host 和 ::ng-deep 。示例-

:host ::ng-deep .mat-tab-label {
    display: flex;
}

有没有办法让 angular 2/4 material 标签宽度基于标签的长度而不是切断？

Is there a way to make angular 2/4 material tab widths be based on the length of the label instead of cutting off?

angular-material2

angular