Question

我正在使用angular2材质，我遇到的问题是我的某些标签很长，这会切断标题文字末尾的图标。（小x）。在下面的代码中，请注意由于标签被切断，某些标签的右侧没有x。是否有某种方法可以使标签大小以便显示整个标签？

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

<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>

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

如果无法做到这一点，那是可以接受的答案。

Answer 1

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

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

这是一个有修复的插件：

Angular 2 Material Demo for tab with close icon - Plunkr

Answer 2

如果您在style.css中编写了接受代码，它将影响应用程序的所有标签。如果要使用特定于组件的组件，请事先编写：host和:: ng-deep。例子-

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

有没有办法使角度2/4材料标签宽度基于标签的长度而不是切断？

2 个答案: