纯 CSS 无法强制按空格精确断行，但可通过替换连字符为非断行连字符（‑）结合 white-space: normal 和 word-break: keep-all 实现语义化换行，避免单词/数字区间被错误截断。
纯 css 无法强制按空格精确断行，但可通过替换连字符为非断行连字符（`‑`）结合 `white-space: normal` 和 `word-break: keep-all` 实现语义化换行，避免单词/数字区间被错误截断。
在 Angular 的 MatTable 中，表头文字（如 "some events50-500"）因容器宽度收缩而自动换行时，默认行为会依据 Unicode 断行规则在任意位置（包括连字符 - 或数字中间）折行，导致语义断裂——例如 "some events5" + "0-500"，这显然违背可读性与业务逻辑。
虽然问题明确要求“纯 CSS 方案”，但需明确指出：目前没有任何标准 CSS 属性能强制浏览器仅在空白符（U+0020）处换行，同时禁止在连字符、数字串等位置断行。W3C 已就 word-wrap: break-word 的语义增强` 提出草案，但尚未被任何主流浏览器实现。
✅ 可行且推荐的工程化方案是：在数据渲染前，将普通连字符 - 替换为 Unicode 非断行连字符 ‑（U+2011，HTML 实体 ‑），再配合合理 CSS 控制换行策略：
<!-- 模板中使用安全的 innerHTML 绑定（需信任内容） --> <div [innerHTML]="getTitleFromOption(option)"></div>
// 组件 TS 文件
getTitleFromOption(option: { title: string }): string {
return option.title.replace(/-/g, '‑');
}或更简洁地（Angular 会自动转义）：
立即学习“前端免费学习笔记（深入）”；
<div class="table-header-title">{{ getTitleFromOption(option) }}</div>getTitleFromOption(option: { title: string }): string {
return option.title.replace(/-/g, '‑'); // 直接插入 U+2011 字符
}? 配套 CSS 建议（添加到 .table-header-title 类）：
.table-header-title {
white-space: normal; /* 允许换行 */
word-break: keep-all; /* 禁止在单词/数字内部断行（对中文/英文均有效） */
overflow-wrap: break-word; /* 作为兜底：必要时在长单词内断行（如超长 ID）*/
}⚠️ 注意事项：
- 非断行连字符
‑（U+2011）与普通连字符-（U+002D）视觉几乎一致，但浏览器将其视为“不可断行”符号； - 避免使用
- 若标题中存在其他需保护的符号（如
/、_），可扩展正则：.replace(/[-/]/g, '‑')； - 此方案无需修改列定义数组结构，完全符合“不重写 columns 数组”的约束。
总结：与其等待未落地的 CSS 标准，不如用一行正则 + 一个 Unicode 字符，在保持代码简洁性的同时，精准控制语义边界换行——这是当前 Web 开发中兼顾兼容性、可维护性与用户体验的最佳实践。
