Angular Material 5 - 在 Mat 列表中显示全文(Word Wrap)

Question

我正在创建一个聊天框，每条消息都是一个 Angular Material 垫列表。 https://material.angular.io/components/list/overview .

但是，如果消息真的很长而不是增加高度并转到下一行，它会剪切消息并显示一个椭圆。如下图所示。

 <mat-list dense>     
    <mat-list-item class="chat-message-body" *ngIf="auth._id !== message.author._id" fxLayoutAlign="" dir="ltl">
        <div matLine>
            <b>{{message.author.profile.username}} </b>
            <span>{{message.created_at | date:'shortTime'}} </span>
        </div>
        <span matLine> {{message.body}} </span>
        <img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
    </mat-list-item>
</mat-list>

如何强制显示全文

Answer 1

使用以下 CSS:

::ng-deep .mat-list .mat-list-item .mat-line{
     word-wrap: break-word;
    white-space: pre-wrap;
}

或

::ng-deep .mat-line{
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
}

mat-list-item 的高度限制为 48px，因此我们需要在大文本的情况下覆盖

::ng-deep  .mat-list .mat-list-item{
  height:initial!important;
}

演示:https://plnkr.co/edit/tTlhYgTkSz1QcgqjCfqh?p=preview

Link了解更多关于 word-wrap 和 white-spac