Angular Material Table Mat-Cell无法获得长字符串来打断单词

时间:2019-09-06 14:22:48

标签: css angular material

我有一个Angular应用,其组件包含带有mat-h​​eader-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; */
  } 

0 个答案:

没有答案