Issue
In my Angular Material Application I have a list (mat-list) with several rows (mat-list-items).
I’m trying to prevent the mat-list-items from wrapping their content.
For example, instead of this:
IT Architect
at General Electric
it shall look like this:
IT Architect at General Electric
Here is the html:
component.html:
<mat-list>
<mat-list-item class="no-wrap">
<h3 class="name"> {{firstName}} {{lastName}} </h3>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item class="no-wrap" *ngIf="position && company"> {{position}} at {{company}} </mat-list-item>
<div class="gap"></div>
<mat-list-item class="no-wrap">
<mat-icon>email</mat-icon>
<span class="email"> {{email}} </span>
</mat-list-item>
</mat-list>
I tried to achieve my goal with the following CSS:
component.css:
.no-wrap {
word-wrap: break-word;
white-space: pre-wrap;
}
However, this doesn’t work.
How can I prevent the items of an angular material list from wrapping the text they contain?
Solution
<mat-list>
<mat-list-item class="no-wrap">
<h3 class="name"> <span class="nobreak"> {{firstName}} {{lastName}} </span> </h3>
</mat-list-item>
<mat-divider></mat-divider>
<mat-list-item class="no-wrap" *ngIf="position && company"> <span class="nobreak"> {{position}} at {{company}} </span> </mat-list-item>
<div class="gap"></div>
<mat-list-item class="no-wrap">
<mat-icon>email</mat-icon>
<span class="email"> {{email}} </span>
</mat-list-item>
</mat-list>
css
.no-wrap {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}