Angular Material List:如何防止mat-list-items包装内容?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (276)

在我的Angular Material Application中,我有一个包含多行(mat-list-items)的列表(mat-list)。

我正在尝试阻止mat-list-items包装其内容。

例如,而不是这样:

通用电气的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;
}

但是,这不起作用。

如何防止角度材料列表中的项目包含它们包含的文本?

提问于
用户回答回答于
    <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;
 }

扫码关注云+社区

领取腾讯云代金券