Angular Material Table mat-cell cannot get long string to break word

Question

I have an Angular app with a component containing a table with mat-header-cell and mat-cell. I read several post and can't get the mat-cell to break word and wrap the content. I played binded the same string to the header and it wrapped. I can't figure out why the .mat-cell will not break word and wrap. Thanks.

UPATE: Just tried the following but still not working

   <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>

This is the previous version

<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>

In my css, I tried several code that I read from other posts but not is affecting the 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; */
  }