根本原因是缺少width/max-width和white-space: normal；overflow-wrap: break-word仅在内容实际溢出时触发断行，若容器无宽、为inline或被white-space: nowrap锁定，则完全失效。
overflow-wrap: break-word 为什么经常不生效
根本原因不是 Less 写错了，而是生成的 CSS 缺少两个硬性前提：width 或 max-width + white-space: normal（或未被覆盖）。overflow-wrap: break-word 只在内容实际溢出容器时才触发断行，如果父元素是 display: inline、没设宽、或被 white-space: nowrap 锁死，它就完全静默。IE11 不认 overflow-wrap，必须同时写 word-wrap: break-word；旧版 Chrome 则需要 word-break: break-word 兜底。
如何封装一个不踩坑的 .text-wrap() Mixin
别用单层属性，得按浏览器支持梯度写全：
.text-wrap(@mode: soft) when (@mode = soft) {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: normal;
}
.text-wrap(@mode: hard) when (@mode = hard) {
word-break: break-all;
overflow-wrap: anywhere; // 现代替代方案，比 break-all 更语义
}
.text-wrap(@mode: keep) when (@mode = keep) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
-
@mode: soft是默认安全策略，适合 URL、中英文混排标题 -
@mode: hard仅用于日志 ID、base64、token 等无语义字符串，break-all会切开中文词和英文单词中间，慎用 -
@mode: keep必须配合固定宽度，否则text-overflow无效 - 所有调用处都得确保父容器有
width或max-width，Less 编译不出这个约束
为什么 .text-wrap(hard) 容易让链接不可点
word-break: break-all 会把 https://example.com/path/to/resource 切成 https://examp…，导致后半截 URL 失效。真实项目里更稳妥的做法是：
- 对可点击 URL 使用
.text-wrap(soft)+hyphens: auto（需 HTML 加lang="en"） - 对不可点击的密文字段（如
data-token）才启用hard模式 - 小屏响应式下，建议从
hard切回soft，避免 break-all 在窄容器里切得太碎
mixins 里漏掉 word-break: normal 就可能白写
这是最隐蔽的坑：Chrome 80+ 要求显式声明 word-break: normal，overflow-wrap: break-word 才能正确识别“空格/连字符”作为断点。否则它会退化成类似 break-all 的行为。所以 .text-wrap(soft) 里那句 word-break: normal 不是可选，是必须。另外，如果父选择器带 :not() 或嵌套过深，生成的 CSS 权重可能被第三方 UI 库覆盖，建议加 !important 仅限关键场景，或改用语义化 class 如 .cell-url 直接调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
