我有一个Angular应用,其组件包含带有mat-header-cell和mat-cell的表的组件。我读了好几篇文章,却无法让Mat-cell打破字面并包装内容。我演奏了将相同的字符串绑定到标头并将其包装。我无法弄清楚为什么.mat-cell不会断行并换行。谢谢。
UPATE:刚刚尝试了以下操作,但仍无法正常工作
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>{{object.note}}</th>
<td mat-cell *matCellDef="let object">
<div style="width: 442px; word-wrap: break-word">
{{object.note }}
</div>
</td>
</ng-container>
这是以前的版本
<ng-container matColumnDef="notes">
<th mat-header-cell *matHeaderCellDef>{{object.note}}</th>
<td mat-cell style=" word-wrap: break-word !important; overflow-wrap: break-word !important;" *matCellDef="let data">{{object.note}}</td>
</ng-container>
在我的CSS中,我尝试了一些从其他帖子中读取的代码,但没有影响到mat.cell
.mat-column-notes {
word-wrap: break-word !important;
white-space: unset !important;
flex: 0 0 15% !important;
width: 15% !important;
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
th.mat-header-cell {
color: black;
font-weight: bold;
word-wrap: break-word;
word-break:break-all;
}
td.mat-cell {
word-wrap: break-word;
word-break:break-all;
}
table {
/* text-align: center !important; */
width: 100%;
/* table-layout: fixed; */
table-layout: fixed;
/* white-space: nowrap;
overflow-wrap: break-word;
text-overflow: ellipsis; */
}