How to show data In two line in mat-select?

Question

In mat-select the options have too long strings, selected option should be shown in two lines in same dropdown.

Now the string looks incomplete.

incomplete string example

<mat-form-field class="form-field">
    <mat-select formControlName="foo">
        <mat-option value="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
        </mat-option>
     </mat-select>
</mat-form-field>

I want somthing like this

example complete selected option

Answer 1

There seem to be a few outdated answers.
As of Angular Material 11, you can do this easily by adapting the css of mat-option.

<mat-option class="multiline-mat-option">
   <div>Line 1</div>
   <div>Line 2</div>
</mat-option>

.multiline-mat-option.mat-option {
  white-space: normal;
  line-height: normal;
}