Leos Literak's questions

Estou usando o PrimeNG versão 19 no meu projeto Angular 19, e tenho uma tabela onde algumas colunas contêm texto longo. Atualmente, o texto quebra em várias linhas, mas quero truncar o texto com reticências (...) se ele ultrapassar a largura da coluna.

Componente

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

Este arquivo CSS não funciona, o estilo nowrap tornará a coluna tão grande quanto o texto mais longo.

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

quando desligo, a largura da coluna fica OK, mas seu conteúdo não fica truncado.

Bônus: Eu adoraria ter colunas redimensionáveis, mas essas configurações também fazem a tabela transbordar.