text-wrap: wrap 是无效写法，正确属性是 white-space、word-break 和 overflow-wrap；需注意容器宽度限制、flex 项 min-width、safari 兼容性及 white-space 冲突。
text-wrap: wrap 不是标准 CSS 属性
直接写 text-wrap: wrap 会失效，这是初学者常写的错误。CSS 中控制文本换行的核心属性是 white-space 和 word-break（或 overflow-wrap），不是 text-wrap。
常见场景：长英文单词、URL、中文混排内容在窄容器里溢出或不折行。
-
white-space: normal（默认）—— 允许换行，但对连续无空格字符串（如https://example.com/verylongpathwithoutslash）无效 -
word-break: break-all—— 强制在任意字符处断行，适合纯英文/URL，但可能把单词中间切断（如examp-le） -
overflow-wrap: break-word—— 优先在单词内断行，仅当单词本身超宽时才折，对中文友好，推荐首选
中文段落换行要关掉 white-space: nowrap
如果文本没换行，先检查是否父元素或自身设置了 white-space: nowrap 或 no-wrap 类（尤其来自 UI 框架如 Ant Design、Bootstrap 的 utility class）。这个设置会彻底禁用换行，哪怕内容再长也一行显示。
修复方式很简单：显式覆盖它：
.my-text {
white-space: normal; /* 或 unset */
overflow-wrap: break-word;
}
注意：white-space: pre 和 pre-line 也会抑制自动换行逻辑，需按需调整。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
Flex/Grid 容器里文本不换行？检查 min-width: auto
在 display: flex 或 display: grid 的子元素中，即使写了 overflow-wrap: break-word，文本仍可能不折行——这是因为 flex item 默认有 min-width: auto，会阻止收缩换行。
解决方法是显式设置最小宽度约束：
- 加
min-width: 0（flex item）或min-inline-size: 0（更语义化） - 或者用
flex: 1/flex: auto替代flex: none - 避免在 flex 子元素上同时设
white-space: nowrap和flex-shrink: 0
移动端 Safari 对 overflow-wrap 支持有延迟
iOS 14.5+ 已支持 overflow-wrap: break-word，但旧版 Safari（如 iOS 12–13）只认 word-wrap: break-word（已废弃但仍有效）。为兼容，建议双写：
.content {
word-wrap: break-word; /* 旧 Safari */
overflow-wrap: break-word; /* 现代标准 */
}
另外，Safari 在 input 或 textarea 里不响应 overflow-wrap，这类控件换行靠 wrap="soft"（textarea）或原生行为控制，不能用 CSS 强制。
真正容易被忽略的是：换行生效前提是容器有明确宽度限制（比如 width: 300px 或 max-width: 100%），否则浏览器认为“足够宽”，根本不会触发折行逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
