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

admin管理员组

文章数量:1332890

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

Now the string looks inplete.

inplete 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 plete selected option

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

Now the string looks inplete.

inplete 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 plete selected option

• javascript
• html
• css
• angular

Share Improve this question Follow edited Jul 28, 2020 at 22:15 Joshua Villalobos asked Jul 27, 2020 at 18:34 Joshua VillalobosJoshua Villalobos 6111 silver badge33 bronze badges 1

• Does this answer your question? not enough space in <mat-select>. How to add multiple line <mat-option>? – Shabbir Dhangot Commented Jul 27, 2020 at 19:05

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

本文标签： javascriptHow to show data In two line in matselectStack Overflow