How to truncate long text with ellipsis in Angular PrimeNG 19 table?

I am using PrimeNG version 19 in my Angular 19 project, and I have a table where some columns contain long text. Currently, the text wraps onto multiple lines, but I want to truncate the text with an ellipsis (...) if it overflows the column width.

Component

<p-table
[value]="rulesSignal()"
[paginator]="true"
[rows]="10"
[rowHover]="true"
stripedRows
[tableStyle]="{'min-width': '50rem'}"
>
<ng-template #header>
<tr>
<th pSortableColumn="name">
Name
<p-sortIcon field="name" />
<p-columnFilter type="text" field="name" display="menu" />
</th>
<th>Note</th>
<th pSortableColumn="salience">
Salience
<p-sortIcon field="salience" />
<p-columnFilter type="text" field="salience" display="menu" />
</th>
<th>When Condition</th>
<th>Then Expression</th>
<th pSortableColumn="active">
Active
<p-sortIcon field="active" />
<p-columnFilter type="boolean" field="active" display="menu" />
</th>
</tr>
</ng-template>
<ng-template #body let-rule>
<tr>
<td>{{ rule.name }}</td>
<td>{{ rule.note }}</td>
<td>{{ rule.salience }}</td>
<td class="source-code" (click)="openCodeDialog(rule.whenText)">{{ rule.whenText }}</td>
<td class="source-code" (click)="openCodeDialog(rule.thenText)">{{ rule.thenText }}</td>
<td>{{ rule.active }}</td>
</tr>
</ng-template>
</p-table>


This CSS file does not work, nowrap style will make the column as large as the longest text.

.source-code {
cursor: zoom-in;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}




when I turn it off, the column width is OK, but its content is not truncated.



Bonus: I would love to have resizable columns, but that settings make the table overflow as well.

Continue reading...