Angular material table header 文本断到下一行

Question

我有一个 angular material table，其中 header 中文文本换行

<div class="mat-table-container">
    <div class="mat-table-elevated-wrapper ">
        <table mat-table [dataSource]="dataSource">
            <ng-container matColumnDef="type">
                <th mat-header-cell *matHeaderCellDef >
                  <span>类型</span>
                </th>
                <td mat-cell *matCellDef="let call_log">
                  <span>getIcon(call_log.type)</span>
                </td>
            </ng-container>

            <ng-container matColumnDef="name">
                <th mat-header-cell *matHeaderCellDef>
                  <span>名称</span>
                </th>
                <td mat-cell *matCellDef="let call_log">
                  getName(call_log.name)
                </td>
            </ng-container>
            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
            <tr mat-row *matRowDef="let row; let even = even; columns: displayedColumns"
                [ngClass]="{ 'mat-table-row-color': even, 'call-logs-errors': getErrorRowCondition(row.type) }"></tr>
        </table>
    </div>
</div>

相同的英文文本是"Type"。这不是坏了，而是中文文本坏了。是什么导致文本被破坏？如何解决？

Answer 1

<mat-header-cell *matHeaderCellDef>
  <span>类型</span>
</mat-header-cell>

Answer 2

是否可能是类型列的宽度导致文本分成两行？尝试将以下代码添加到组件的 css 文件中：

将 "type" 更改为 matColumnDef 持有的任何值

.mat-column-type{
  width: 20%;
}

Answer 3

.mat-header-cell{
  display: inline
}
/** or **/

.custom-th > span{
  display: inline
}

<mat-header-cell *matHeaderCellDef>
  <span>类型</span>
</mat-header-cell>

or

<mat-header-cell *matHeaderCellDef class="custom-th">
  <span>类型</span>
</mat-header-cell>

Angular material table header 文本断到下一行

Angular material table header text broken to next line

css

angular-material

angular

mat-table