Leos Literak's questions

我在 Angular 19 项目中使用 PrimeNG 版本 19，并且我有一个表，其中某些列包含长文本。当前，文本换行到多行，但如果文本超出列宽，我想用省略号 (...) 截断文本。

成分

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

该 CSS 文件不起作用，nowrap 样式将使列与最长的文本一样大。

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

当我将其关闭时，列宽正常，但其内容不会被截断。

奖励：我希望有可调整大小的列，但该设置也会使表格溢出。