Angular текст заголовка таблицы материалов разбит на следующую строку

Question

У меня есть angular таблица материалов, в которой текст заголовка на китайском языке переносится на новую строку

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

Тот же текст на английском языке sh - "Тип". Это не сломано, но китайский текст сломан. Что заставляет текст быть сломанным? Как это можно решить?

Answer 1

Возможно ли, что ширина столбца типа превращает текст go в две строки? Попробуйте добавить следующий код в файл css вашего компонента:

Измените "тип" на любое значение, которое matColumnDef содержит

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

Answer 2

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

Answer 3

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