Angular Material 5 - Show full text in Mat Lists ( Word Wrap )

Question

I am creating a chat box each message is a angular material mat list. https://material.angular.io/components/list/overview.

However, if the message is really long instead of increasing the height and going onto next line, it cuts the message and displays an ellipse. As shown in the image below.

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

How do i force it to show the full text

Answer 1

Use the following css:

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

or

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

Height of mat-list-item is limited to 48px so we need to override in case of large text

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

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

Link to know more about the word-wrap and white-spac

Answer 2

Simply wrap your whole paragraph inside of <mat-list-item> with <p> tags and that will force correct styles. Makes sense... No need for styles in this case.

<mat-list-item>
  <p>
    My super long text..........
  </p>
</mat-list-item>