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

user_1548432 0
Viewed 25488

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.

enter image description here

 <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

angular-material angular
5 Answers

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

user_82970200

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

In case anyone reading this post was looking to wrap the dense mat list <mat-list dense>, add [dense] to mohit uprim's answer above:

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

HI have you tried with the CSS property word-break or overflow-break ?

user_38607670
Related