关于CSS样式word-break: break-word的有效性及应用疑问

嘿，这个问题抓得很细致，我来一步步给你拆解清楚：

1. word-break: break-word是不是合法CSS语法？ #

严格来说，它不是标准的合法语法。

根据CSS规范：

• break-word是overflow-wrap（原word-wrap是overflow-wrap的历史别名）的合法取值，作用是当单词长度超出容器时，允许在单词内部换行。
• 而word-break的标准合法取值只有normal、break-all、keep-all（早期草案曾短暂把break-word列入word-break的取值，但最终被移除并归入overflow-wrap的规范）。

所以你用Resharper检测到的这个写法，在语法规范层面是不符合标准的，属于非标准兼容写法。

2. 微软为何在新版MVC模板中使用这个样式？ #

核心原因和浏览器兼容历史有关：

• 虽然规范不承认word-break: break-word，但Chrome、Edge等主流浏览器出于兼容性考虑，会对这个写法做“容错解析”——把它等同于同时设置overflow-wrap: break-word和word-break: normal，实际效果和标准写法一致。
• 微软的模板大概率是为了兼顾不同版本的浏览器（包括一些对overflow-wrap支持不够完善的旧环境），或是延续了早期前端开发中的习惯写法。毕竟这个非标准写法不会导致页面崩溃，反而能稳定达到预期的换行效果，所以被保留了下来。
• 当然也不排除是模板开发时的小疏漏，但考虑到实际使用中的兼容性表现，这个写法在项目里能正常工作，也就没做修正。

符合规范的推荐写法 #

如果想要严格遵循CSS标准，建议替换成：

/* 标准写法 */
overflow-wrap: break-word;
/* 加上历史别名兼容旧版浏览器 */
word-wrap: break-word;
overflow-wrap: break-word;

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