Less中应封装三种断行策略：.text-wrap(soft)默认推荐，.text-wrap(hard)仅用于无语义密文，.text-wrap(keep)实现单行省略；需显式设word-break:normal以确保overflow-wrap生效，hyphens:auto不适用于Web UI。
Less中word-break和overflow-wrap的混用差异
直接写 word-break: break-all 会粗暴切开任意单词（包括中文词内、URL中间），而 overflow-wrap: break-word 只在必要时才在空格或连字符处断行，更符合阅读习惯。但 Less 本身不提供运行时逻辑，所谓“混合器”本质是预编译的 CSS 规则组合，必须明确区分适用场景。
封装一个带策略参数的断句混合器
用 Less 的参数控制行为，比写多个独立混合器更易维护。关键不是“通用”，而是把三种常见策略显式暴露出来：
-
.text-wrap(soft)→overflow-wrap: break-word; word-break: normal;（推荐默认） -
.text-wrap(hard)→word-break: break-all;（仅用于纯英文/数字密文等无语义场景） -
.text-wrap(keep)→white-space: nowrap; overflow: hidden; text-overflow: ellipsis;（单行截断）
注意：不能省略 word-break: normal，否则在某些旧版 Chrome 中 overflow-wrap 不生效。
为什么不能只靠hyphens自动连字符
hyphens: auto 看似智能，但实际依赖浏览器对语言的识别（需设 lang 属性）、字体支持、以及服务端是否提供断字词典（如 Firefox 需 hyphenate-resource）。中文基本无效，英文在移动端兼容性差，且会引入额外渲染开销。它适合出版级排版，不适合 Web UI 的稳健需求。
立即学习“前端免费学习笔记（深入）”；
配合容器宽度与最小断点做兜底
混合器再完善，也救不了超长无空格字符串（如 Base64、长 Token）。必须结合容器约束：
- 给父容器加
max-width或flex-basis，避免无限撑宽 - 对已知高危字段（如
data-token）单独加.text-wrap(hard) - 在响应式断点中重置为
.text-wrap(soft)，防止小屏下break-all切得太碎
真正容易被忽略的是：混合器生成的 CSS 没法动态感知内容长度，所有“自动”都是静态规则——该加 title 属性提示原文，还得加。
