Angular Material 5 - Show Full Text In Mat Lists ( Word Wrap )

Answer :

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

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> 

I created this css/scss class.

    /* CSS */     .mat-list-item.mat-list-item-word-wrap {       height: initial !important;     }     .mat-list-item-word-wrap .mat-line {       word-wrap: break-word !important;        white-space: pre-wrap !important;     } 

or

    /* SCSS */     .mat-list-item.mat-list-item-word-wrap {       height: initial !important;       .mat-line {         word-wrap: break-word !important;          white-space: pre-wrap !important;       }     } 

html:

    <mat-list>       <mat-list-item class="mat-list-item-word-wrap">         <mat-icon mat-list-icon>description</mat-icon>         <h3 mat-line>{{ description }}</h3>       </mat-list-item>     </mat-list> 

see example here: https://stackblitz.com/edit/angular-6mhz2x