如何用CSS实现Angular Mat-Table表头按空格完整换行？

直接给.table-header-title类添加以下CSS样式，即可实现仅按空格拆分文本并完整换行，无需修改表头列数组：

.table-header-title {
  /* 保留文本中的空格，仅在空格或容器边界处换行 */
  white-space: pre-wrap;
  /* 禁止在单词内部（包括带连字符的单词）强制拆分换行 */
  word-break: normal;
  /* 不允许长单词自动拆分换行 */
  overflow-wrap: normal;
  /* 禁用浏览器自动连字符换行功能 */
  hyphens: none;
}

样式说明 #

• white-space: pre-wrap：保留标题中的空格字符，同时允许文本在容器宽度不足时自动换行，确保空格是唯一的换行触发点。
• word-break: normal：遵循浏览器默认的单词边界规则，仅在空格处换行，不会拆分连续的字符串（比如events50-500会作为一个整体）。
• overflow-wrap: normal：禁止长单词因容器宽度不足而被强制拆分。
• hyphens: none：关闭浏览器自动添加连字符并换行的功能，避免连字符位置被错误拆分。

这样设置后，像some events50-500这类标题只会在some和events50-500之间的空格处换行，不会拆分events50-500这个整体，完全符合需求。

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