Css 角度材质列表：如何防止材质列表项包裹内容？

在我的Angle Material应用程序中，我有一个包含多行（mat列表项）的列表（mat列表）

我试图阻止mat列表项包装其内容

例如，与此相反：

IT架构师
通用电气

它应该是这样的：

通用电气的IT架构师

以下是html：

component.html：

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

然而，这不起作用

---

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

运行angular 11.X

    <mat-list>
          <mat-list-item class="no-wrap">                    
              <h3 class="name"> <span class="nobreak"> {{firstName}} {{lastName}} </span> </h3>                                       
          </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>
          <div class="gap"></div>    
          <mat-list-item class="no-wrap">
              <mat-icon>email</mat-icon>
              <span class="email"> {{email}} </span>
          </mat-list-item>
    </mat-list>

另一个选项是在树周围添加一个滚动视口，然后将mat树节点的CSS设置为空白：nowrap

<mat-card>
  <mat-card-content>
    <cdk-virtual-scroll-viewport itemSize="30" class="tree">
      <ng-container *cdkVirtualFor="let item of dataSource"></ng-container>
      <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent="20px" class="tree-node">
          <button mat-icon-button disabled></button>
          {{node.name}}
        </mat-tree-node>
        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="20px" class="tree-node">
          <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          {{node.name}}
        </mat-tree-node>
      </mat-tree>
    </cdk-virtual-scroll-viewport>
  </mat-card-content>
</mat-card>

---

我想你误解了我的目标。。。我希望文本不要换行/断开。。。它应保持在一行上，不换行/分为多行。如答案文本中出现类似的变化，则不会中断，但如果太大，则不会显示所有内容。

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

<mat-card>
  <mat-card-content>
    <cdk-virtual-scroll-viewport itemSize="30" class="tree">
      <ng-container *cdkVirtualFor="let item of dataSource"></ng-container>
      <mat-tree [dataSource]="dataSource" [treeControl]="treeControl">
        <mat-tree-node *matTreeNodeDef="let node" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent="20px" class="tree-node">
          <button mat-icon-button disabled></button>
          {{node.name}}
        </mat-tree-node>
        <mat-tree-node *matTreeNodeDef="let node; when: hasChild" matTreeNodePadding matTreeNodePaddingIndent="20px" class="tree-node">
          <button mat-icon-button matTreeNodeToggle [attr.aria-label]="'Toggle ' + node.name">
            <mat-icon class="mat-icon-rtl-mirror">
              {{treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right'}}
            </mat-icon>
          </button>
          {{node.name}}
        </mat-tree-node>
      </mat-tree>
    </cdk-virtual-scroll-viewport>
  </mat-card-content>
</mat-card>

.type-icon {
  color: #757575;
  margin-right: 5px;
}

.tree-node {
  height: 30px;
  min-height: 30px;
  white-space: nowrap;
}

.tree {
  height: 600px;
}