In Ionic, implementing word wrapping for selectable items within a list or dropdown, commonly referred to as a “select” component, can enhance the user experience and readability. Here’s a general approach to achieving word wrap in an Ionic selectable component:
Continue reading “Enabling word wrap for Ionic select component”How to truncate text in an Angular Material UI table cell
Working on a recent project using Angular and Material UI, I needed to be able to truncate the text in one of the cells of a Material table. Here is the simplest way I have found to accomplish that.
//Add this to your css
mat-cell > span.truncate-text {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
//Wrap the long text in a span with a class of truncate-text
<ng-container matColumnDef="longtext">
<mat-header-cell *matHeaderCellDef> LongText </mat-header-cell>
<mat-cell *matCellDef="let element">
<span class="truncate-text">{{element.longtext}}</span>
</mat-cell>
</ng-container>