Question

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

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

例如，代替此：

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>

我尝试通过以下CSS实现我的目标：

component.css：

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

但是，这不起作用。

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

Answer 1

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

css

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

Answer 2

运行 Angular 11.X

另一种选择是在您的树周围添加一个滚动视口，然后将您的 mat-tree-node 的 CSS 设置为 white-space: nowrap< /strong>

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

CSS

.type-icon { color: #757575; margin-right: 5px; } .tree-node { height: 30px; min-height: 30px; white-space: nowrap; } .tree { height: 600px; }

角物料清单：如何防止物料清单项目包装内容？

2 个答案: