内容不自动换行主因是white-space设为nowrap或容器含超长无空格字符串且未配overflow-wrap:break-word；需检查文本元素white-space设置，对长单词加overflow-wrap:break-word，Flex/Grid子项换行需显式设flex-wrap:wrap或适配grid模板。
内容不自动换行，八成是 white-space 被设成了 nowrap，或者容器里塞了超长无空格字符串（比如 URL、Base64），而没配 overflow-wrap: break-word。
white-space 设置错误导致文字挤成一行
块级元素默认就是 white-space: normal，会自动折行；但一旦显式写了 white-space: nowrap 或 pre，就再也不会换行了——哪怕内容撑爆容器。
- 检查是否在父容器或文本元素上误加了
white-space: nowrap，尤其是用框架生成的按钮、标签、表格单元格等，常带默认样式 -
white-space: pre会保留所有换行和空格，但不自动折行；若需保留格式又允许折行，改用white-space: pre-wrap - 别对整个卡片容器设
white-space: nowrap来“防换行”，这会连内部标题、段落一起锁死
长单词/URL 溢出容器却不换行
即使 white-space: normal 生效，遇到连续无空格字符串（如 https://example.com/very-long-path-without-hyphens）仍会溢出。这不是 bug，是浏览器默认行为：单词边界不可拆。
- 给文本容器加
overflow-wrap: break-word（推荐）或word-break: break-all（慎用） -
overflow-wrap: break-word只在整词放不下时才断开，语义更友好；word-break: break-all会无差别切中文、英文、数字，影响可读性 - 旧版 IE 需兼容时，可同时写：
overflow-wrap: break-word; word-wrap: break-word; - 注意：该规则只对当前容器生效，子元素（如
<span>）若单独设置了white-space，可能覆盖父级效果
Flex/Grid 容器中子项不换行
很多人以为只要用了 display: flex 或 display: grid，里面的内容就会“自动响应换行”——其实完全不是。Flex/Grid 控制的是子元素排列，不是子元素内部文本的换行逻辑。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- Flex 容器必须显式声明
flex-wrap: wrap，否则所有子项强行挤在一行（常见于导航栏、图标组） - Grid 容器若用
grid-template-columns: repeat(3, 1fr)，列数固定为 3，小屏下直接横向滚动；应改用repeat(auto-fill, minmax(280px, 1fr))) - 子项自身若设了
white-space: nowrap或min-width过大，也会阻止换行——尤其当卡片内含长标题时 - 别忘了
gap：它不会让子项换行，但缺了它，换行后卡片会紧贴边缘，视觉混乱
响应式下换行位置突兀或错乱
换行不是“越早越好”，而是要兼顾可读性与节奏。同一段文字在不同宽度下断行位置跳变，往往是因为字体大小、行高、padding 没随视口缩放。
- 避免对文本容器硬写
width: 300px，改用相对单位：max-width: 90vw或结合clamp()（如font-size: clamp(1rem, 2.5vw, 1.25rem)） - 移动端窄屏下，单行字数过少易造成频繁换行。可用
hyphens: auto启用连字符（需配合lang属性），但中文支持有限 - 如果用了
<pre>标签展示日志或代码，记得加white-space: pre-wrap和overflow-x: auto，否则小屏直接溢出不可读 - 真正难处理的是「高度敏感型换行」：比如卡片标题 + 两行摘要，换行点卡在第二行末尾，第三行只剩一个字——这时得靠 JS 微调或用 CSS
@container查询（目前仅 Chromium 系支持）
最常被忽略的一点：换行行为最终由**最内层文本容器**的 CSS 决定，而不是最外层布局容器。调试时别只盯着 .card 或 .grid，先 inspect 到 <p>、<span>、<div class="title"> 这类实际装文字的元素。
