Angular PrimeNG CSS p-table pSortableColumn, enable word-wrap break-word is not working

user_1250264 0
Viewed 1179

I am using a primeNg table with columns headers which needs to have break-word into two line. So far, I tried css like the following

.ui-dataTable thead h {
  word-wrap: break-word !important;
}

.break-word {
  word-wrap: break-word !important;
}

HTML code

  <ng-template pTemplate="header">
                    <tr>
                         
                        <th class="break-word" *ngFor="let column of columns" pSortableColumn={{column.field}}>{{column.name}} <p-sortIcon field={{column.field}}></p-sortIcon></th>
                    </tr>
                </ng-template>

I even went to the forum.primefaces.org but that css suggestion did not work.

Thanks for any help.

primeng angular css
1 Answers

In your component.css you can style the p-table with word-break and specify a property depending on where you would like the line breaks to appear when text overflow: examples below

p-table { 
word-break: break-all 
}

the following break-word should be deprecated

p-table { 
word-break: break-word;
}

this can be used instead of the break-word property

p-table { 
word-break: normal;
overflow-wrap: anywhere;
  }
user_80917850
Related