Less 中需用 Mixin 统一配置 word-break 和 overflow-wrap：先写 overflow-wrap: break-word，再加 word-break: break-word 兜底旧版 Chrome，IE11 需显式声明 word-wrap: break-word；父容器必须设 width/max-width 才生效。
word-break 和 overflow-wrap 在 Less 中怎么配才不踩坑
Less 本身不处理 CSS 渲染逻辑，它只是编译器；真正起作用的是生成后的 word-break、overflow-wrap（旧名 word-wrap）这些原生属性。很多人写完 Mixin 发现没生效，其实是属性值选错或浏览器兼容顺序不对。
常见错误现象：word-break: break-all 把英文单词中间硬切，overflow-wrap: break-word 在 Chrome 里对超长无空格 URL 不触发 —— 因为没加 word-break: break-word 做兜底。
-
overflow-wrap: break-word：只在内容溢出容器时才尝试换行，优先保持单词完整性 -
word-break: break-word：Chrome/Edge 支持，效果类似overflow-wrap，但更早版本必须用它 -
word-break: break-all：无差别断字，慎用，尤其对中英文混排的标签文本
封装一个安全可用的断行 Mixin
别只写一层属性，得覆盖老浏览器 + 新标准 + 不同断行意图。下面这个 Mixin 能应对大多数场景，比如表格单元格、日志 ID、API 响应路径等长字符串：
.break-word() {
overflow-wrap: break-word;
word-break: break-word; // 兜底旧版 Chrome
word-break: break-all; // 可选：加在最后，仅当明确需要暴力断字时启用
hyphens: auto; // 可选：对支持语言（如英文）启用连字符
}
使用场景：.log-id { .break-word(); }，而不是直接写死属性 —— 后续要统一调整策略（比如改用 text-overflow: ellipsis）时，只改 Mixin 就行。
注意：如果父容器没设 width 或 max-width，这些断行属性基本无效。Less 编译不出布局约束，这点容易被忽略。
为什么 white-space: pre-wrap 有时比断行更合适
遇到带空格、制表符或换行符的原始文本（比如代码片段、JSON 响应体），强行用 word-break 反而破坏语义。这时候 white-space: pre-wrap 更自然：保留原有空白，同时允许折行。
常见错误现象：后台返回的 "error_code: E_INTERNAL_SERVER_ERROR" 被 break-all 切成 E_INTE..._ERROR，可读性反而下降。
- 搭配
font-family: monospace效果更稳 - 注意和
textarea默认行为一致，适合展示而非编辑 - 不需要 Mixin 封装，直接声明即可，Less 里写
white-space: pre-wrap;
IE11 兼容必须手动加 -ms- 前缀吗
不用。Less 的 autoprefixer 插件（或构建工具里的 PostCSS）会自动补 -ms-word-break，前提是你的目标浏览器配置包含 IE11。但要注意：IE11 不支持 overflow-wrap，只认 word-wrap，所以 Mixin 里得显式写上：
.break-word() {
word-wrap: break-word; // IE11 only
overflow-wrap: break-word;
word-break: break-word;
}
如果构建流程没开 autoprefixer，或者用了老版本（-ms-word-break 可能漏掉 —— 这类问题在线上环境才暴露，本地开发看不出来。
复杂点在于：不同浏览器对「长单词」定义不一致（比如是否把连字符算作断点），实际效果得靠真机或 BrowserStack 验证，不能只信文档。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
