关于css：Angular Material List：如何防止mat-list-item包装内容？

Angular Material List: How to prevent mat-list-items from wrapping content?

在我的Angular Material应用程序中，我有一个包含多个行的列表(mat-list)(mat-list-items)。

我正在尝试防止mat-list-item包装其内容。

例如，代替此：

IT Architect
at General Electric

应如下所示：

IT Architect at General Electric

这是html：

component.html：

1
2
3
4
5
6
7
8
9
10
11
12

<mat-list>
<mat-list-item class="no-wrap">
<h3 class="name"> {{firstName}} {{lastName}}
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item class="no-wrap" *ngIf="position && company"> {{position}} at {{company}} </mat-list-item>

<mat-list-item class="no-wrap">
<mat-icon>email</mat-icon>
<span class="email"> {{email}} </span>
</mat-list-item>
</mat-list>

我尝试使用以下CSS实现我的目标：

component.css：

1
2
3
4

.no-wrap {
word-wrap: break-word;
white-space: pre-wrap;
}

但是，这不起作用。

如何防止棱角材质列表中的项目包装包含的文本？

1
2
3
4
5
6
7
8
9
10
11
12

<mat-list>
<mat-list-item class="no-wrap">
<h3 class="name"> <span class="nobreak"> {{firstName}} {{lastName}} </span>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item class="no-wrap" *ngIf="position && company"> <span class="nobreak"> {{position}} at {{company}} </span> </mat-list-item>

<mat-list-item class="no-wrap">
<mat-icon>email</mat-icon>
<span class="email"> {{email}} </span>
</mat-list-item>
</mat-list>

css

1
2
3
4
5

.no-wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}