locked
Angular Material Table mat-cell cannot get long string to break or wrap word RRS feed

  • Question

  • User956626884 posted

    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; */
      } 
    Friday, September 6, 2019 7:39 PM

Answers

  • User61956409 posted

    Hi comicrage,

    Please try to not apply custom CSS styles to MatTable and Cell(s), and check if word-wrap: break-word; can work well with default styles of MatTable. And as bruce suggested, you can use browser developer tools to inspect and troubleshoot the displaying issue with CSS styles.

    I did a test with following code snippet, the long words could be able to break and wrap onto the next line.

    <ng-container matColumnDef="note">
      <th mat-header-cell  *matHeaderCellDef>Note</th>
      <td mat-cell *matCellDef="let object" style="background-color:red">
          <div style="width: 442px;word-wrap: break-word;background-color:aqua">
              {{object.note }}
          </div>
      </td>
    </ng-container>

    Test Result

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 9, 2019 7:56 AM

All replies

  • User-474980206 posted
    I assume the row/cell height is fixed, you will not see the wrap if there is any. You should check the docs for the css, and use the browsers tools to see why.
    Friday, September 6, 2019 11:54 PM
  • User61956409 posted

    Hi comicrage,

    Please try to not apply custom CSS styles to MatTable and Cell(s), and check if word-wrap: break-word; can work well with default styles of MatTable. And as bruce suggested, you can use browser developer tools to inspect and troubleshoot the displaying issue with CSS styles.

    I did a test with following code snippet, the long words could be able to break and wrap onto the next line.

    <ng-container matColumnDef="note">
      <th mat-header-cell  *matHeaderCellDef>Note</th>
      <td mat-cell *matCellDef="let object" style="background-color:red">
          <div style="width: 442px;word-wrap: break-word;background-color:aqua">
              {{object.note }}
          </div>
      </td>
    </ng-container>

    Test Result

    With Regards,

    Fei Han

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, September 9, 2019 7:56 AM