How to make mat-select of Angular Material do the line break, in a mobile application?

Issue

I already have the mat-select built with Angular Material, but when the big text I would like to go to the next line, so that it shows the full text.

This is the HTML code:

<mat-select [formControlName]="element.control">
    <mat-option *ngFor="let option of elements" [value]="option">
      {{option}}
    </mat-option>
</mat-select>

This is how it looks in the application:

Making the changes recommended by ビ ー ト フ リ ー ク ス:

try add this on global.scss :

.mat-select-value {
    text-align: center;
    padding-left: 5px;
}

.width-mat {
    width: 30px;
    font-size: inherit;
    line-height: 3em;
    height: unset;
}

.mat-select-panel .mat-option {
    font-size  : inherit;
    line-height: 2em;
    height     : unset;
    white-space: unset;
    border-bottom: var(--Gray1) solid 1px;
}

on your html add the panelClass :

<mat-select 
    panelClass="width-mat" 
    disableOptionCentering
    disableRipple>
    <mat-option *ngFor="let option of elements" value={{option}}>
              {{option}
    </mat-option>
</mat-select>

It looks like this:

Solution

try add this on global.scss :

.mat-select-value {
    text-align: center;
    padding-left: 5px;
}

.width-mat {
    width: 30px;
    font-size: inherit;
    line-height: 2em;
    height: unset;
}

.mat-select-panel .mat-option {
    font-size  : inherit;
    line-height: 1em;
    height     : unset;
    white-space: unset;
}

on your html add the panelClass :

<mat-select 
    panelClass="width-mat" 
    disableOptionCentering
    disableRipple>
    <mat-option *ngFor="let option of elements" value={{option}}>
              {{option}
    </mat-option>
</mat-select> 

u can try my sample here : https://stackblitz.com/edit/angular-cjhn5e?file=src%2Fstyles.scss

Answered By - Nicho