TL; DR: Я хочу добиться поведения переполнения поля, такого как text-overflow: ellipsis
, но для элементов нетекстовых блоков, таких как список микросхем.
Здесь подробности:
У меня есть таблица материалов angular:
<mat-table ...>
<ng-container matColumnDef="a">
<mat-header-cell class="a-column" *matHeaderCellDef mat-sort-header>
<span translate>A</span>
</mat-header-cell>
<mat-cell class="a-column" *matCellDef="let model">
<span>{{model.longText}}</span>
</mat-cell>
</ng-container>
<ng-container matColumnDef="b">
<mat-header-cell class="b-column" *matHeaderCellDef mat-sort-header>
<span translate>B</span>
</mat-header-cell>
<mat-cell class="b-column" *matCellDef="let model">
<mat-chip-list class="nowrap">
<mat-chip *ngFor="let tag of model.tags">
{{tag}}
</mat-chip>
</mat-chip-list>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row *matRowDef="let model; columns: displayedColumns;"></mat-row>
</mat-table>
Для столбца a я фактически использовал text-overflow: ellipsis
для достижения ...
в конце, когда текст перетекает вправо граница.
Столбец b содержит список фишек, в котором может быть много фишек. Я не хочу переходить к следующей строке, поэтому в настоящее время я использовал класс :after
на mat-cell
с полупрозрачным градиентом.
mat-cell.b-column:after {
content: '';
width: 30px;
height: 100%;
position: absolute;
right: 0;
top: 0;
background: linear-gradient(to right, transparent, white);
opacity: 0.8;
}
Но это не совсем идеально. Есть ли какие-то передовые практики или вообще лучший способ добиться этого?
Моя основная цель - проинформировать пользователя о том, что на самом деле в данный момент видно больше фишек. Идеально было бы что-то вроде (+3), показанного в кружке в конце, или, может быть, просто ...
. Но поскольку нет псевдокласса для переполнения, я не знаю, как это сделать.