本地与服务器端overflow-wrap幽灵样式差异及换行问题咨询

• 本地出现的灰色样式是浏览器自动注入的编辑态专属样式，并非你手动配置的。其中-webkit-user-modify: read-write是触发元素可编辑状态的属性——本地打开HTML文件时，部分浏览器（如Chrome）会对本地文件做特殊处理，或误触发了可编辑逻辑，此时浏览器会自动附加这类优化编辑体验的样式，包括overflow-wrap: break-word，用来让编辑时的长单词自动换行。
• 服务器端加载的是标准静态页面，元素默认处于不可编辑状态，浏览器不会注入这类编辑相关的样式，所以超长单词无法自动换行。

要在服务器端也实现相同的换行效果，必须手动编写CSS样式，推荐使用跨浏览器兼容的写法：

/* 替换成你的DIV或P元素的实际选择器 */
.narrow-div p {
  overflow-wrap: break-word;
  /* 可选：兼容部分旧浏览器或特殊语言场景 */
  word-break: break-word;
}

• overflow-wrap: break-word是CSS标准属性，仅当单词超出容器宽度时，才会在单词内部换行，保留单词的完整性。
• word-break: break-word作为补充，能覆盖更多浏览器和语言场景的兼容性需求。

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