Angular PrimeNG表格pSortableColumn表头设置word-wrap: break-word自动换行失效问题求助

看起来你遇到的核心问题是缺少宽度约束，加上可能没适配PrimeNG表格的最新CSS类（新版本里旧的ui-dataTable已经被p-table替代了）。试试下面的方案：

第一步：更新CSS样式 #

替换你现有的代码，添加明确的宽度限制和必要的换行属性：

/* 针对PrimeNG表格的表头单元格 */
.p-table thead th {
  /* 设置合适的最大宽度，根据你的布局需求调整数值 */
  max-width: 160px;
  /* 覆盖PrimeNG默认的 nowrap 样式，允许文本正常换行 */
  white-space: normal !important;
  /* 确保长单词能被拆分换行 */
  overflow-wrap: break-word !important;
  /* 可选：调整内边距，让换行后的文本排版更美观 */
  padding: 8px 12px;
}

/* 避免排序图标被单独换行，保持和文本在同一行 */
.p-table thead th .p-sort-icon {
  display: inline-block;
  margin-left: 5px;
}

第二步：按需调整HTML（可选） #

如果只想让特定表头换行，保留你原来的break-word类，把CSS改成针对这个类的样式即可：

.break-word {
  max-width: 160px;
  white-space: normal !important;
  overflow-wrap: break-word !important;
}

为什么之前的样式不生效？ #

1. 旧的ui-dataTable类在PrimeNG新版本中已被弃用，现在默认用p-table作为表格容器类
2. word-wrap需要元素有明确的宽度/最大宽度才会触发换行，否则表头单元格会自动撑满空间，不会换行
3. PrimeNG表头默认设置了white-space: nowrap，必须覆盖成normal才能允许文本换行

你可以根据表格的实际列宽需求调整max-width的数值，确保表头文本能在合适的位置自动分成两行显示。

内容的提问来源于stack exchange，提问作者user1250264