Less中需用参数mixin封装text-wrap，优先用overflow-wrap: break-word并兼容IE11的word-wrap，配合width/max-width生效；单行省略须white-space: nowrap+overflow: hidden+text-overflow: ellipsis；多行省略依赖-webkit-line-clamp且禁用flex。
word-break 和 word-wrap 在 Less 中怎么写才不被覆盖
Less 编译后 CSS 优先级容易出问题，word-break 和 word-wrap（现推荐用 overflow-wrap）常被后续规则或重置样式干掉。根本原因是它们默认没加 !important，且浏览器对换行行为的解析依赖于元素是否设置了 width 或 max-width。
- 必须显式设置
width或max-width，否则word-break: break-all在块级元素上可能完全不生效 -
word-wrap: break-word已废弃，应统一用overflow-wrap: break-word，但 IE11 只认word-wrap，需同时写两遍 - Less 里用
&嵌套时，如果父选择器带:not()或其他复杂逻辑，生成的 CSS 选择器权重可能压不住第三方 UI 库的重置规则
封装一个兼容性够用的 text-overflow mixin
直接写 text-overflow: ellipsis 不够——它只对单行生效，且依赖 white-space: nowrap + overflow: hidden + 宽度限制。多行省略得靠 -webkit-line-clamp，但这是非标准属性，得单独处理。
- 单行截断 mixin 要强制包含三要素：
white-space: nowrap、overflow: hidden、text-overflow: ellipsis - 多行截断 mixin 必须加
display: -webkit-box和-webkit-line-clamp，且不能和flex布局混用（会失效） - 别在
body或全局重置里直接调用这个 mixin，容易污染其他组件；建议限定在.text-ellipsis、.text-clamp-2这类语义化 class 下使用
break-word 和 break-all 的行为差异到底在哪
很多人以为 break-word 更“智能”，其实它只在单词超长时才折行，正常英文单词之间有空格，它根本不会动；而 break-all 是无差别切，中文、数字、URL 都照切。实际项目里错用会导致阅读断裂或链接不可点。
-
overflow-wrap: break-word：仅当整词长度 > 容器宽度时，才在词内断开（适合中英文混排标题） -
word-break: break-all：无视词边界，按字符切（适合显示日志、base64、长 token） - URL 场景建议用
overflow-wrap: break-word+hyphens: auto（仅现代浏览器），比break-all更友好
Less 中用参数控制换行策略，避免重复写样式
硬编码多个 class 太冗余，用 Less 参数 mixin 能把逻辑收拢。但要注意参数默认值设计——比如 @mode 默认设成 break-word 比 normal 更安全，因为多数场景需要防溢出。
- 示例 mixin：
.text-wrap(@mode: break-word) when (@mode = break-word) { overflow-wrap: break-word; word-wrap: break-word; } .text-wrap(@mode: break-word) when (@mode = break-all) { word-break: break-all; } - 调用时写
.text-wrap(break-all)，编译后不会多出未使用的 CSS 规则 - 别给
@mode设字符串以外的类型（如number），Less 类型判断在复杂条件里容易误判
最常被忽略的是容器高度和 line-height 的配合——-webkit-line-clamp 数值为 2 时，如果 line-height 是 1.5，容器 height 必须是 3em 才能刚好卡住，差一点就会多出半行或少截一行。这种像素级依赖没法靠 mixin 自动推导，得人工对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
