Angular PrimeNG CSS p-table pSortableColumn，启用自动换行断词不起作用答案

【问题标题】：Angular PrimeNG CSS p-table pSortableColumn, enable word-wrap break-word is not workingAngular PrimeNG CSS p-table pSortableColumn，启用自动换行断词不起作用
【发布时间】：2021-10-19 03:44:11
【问题描述】：

我正在使用带有列标题的 primeNg 表，该表需要将断词分成两行。到目前为止，我尝试了如下的 css

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

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

HTML 代码

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

我什至去了 forum.primefaces.org 但那个 css 建议不起作用。

感谢您的帮助。

【问题讨论】：

标签： css angular primeng

【解决方案1】：

在您的 component.css 中，您可以使用 word-break 设置 p-table 的样式，并根据您希望在文本溢出时出现换行符的位置指定一个属性：下面的示例

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

应弃用以下断词

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

这可以用来代替断词属性

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

【讨论】：