inline-block盒子不按内容宽度换行，是因为其换行由直接父容器的white-space属性控制（如normal），而非自身；长单词需配合overflow-wrap: break-word和max-width: 100%才能折行。
inline-block盒子为啥不按内容宽度换行
因为display: inline-block元素默认会像文字一样参与行内布局，但它的内部文本换行行为受父容器white-space控制，而不是自身——很多人误以为设了white-space: normal在子元素上就管用，其实没用。
常见错误现象：div用了display: inline-block，里面放长文本，结果整个盒子被拉得超宽、溢出容器，也不折行。
- 真正起作用的是**父容器**的
white-space（比如white-space: normal），不是inline-block子元素自己设 -
inline-block盒子本身的宽度仍由内容撑开，但“内容”包含未折行的长单词或连续无空格字符串，这时需配合word-break或overflow-wrap - 如果父容器是
white-space: nowrap（比如某些Flex容器或重置样式），那再怎么设子元素都没用
white-space: normal到底该写在哪儿
写在inline-block元素的**直接父容器**上，且该父容器需允许换行（即不能是nowrap或pre）。
使用场景：导航菜单项、标签云、动态生成的卡片列表，既要横向排列、又要单个卡片内文本正常折行。
立即学习“前端免费学习笔记（深入）”；
- ✅ 正确：
<div style="white-space: normal;"> <div style="display: inline-block;">这是一段很长很长没有空格的文本内容</div> </div>
- ❌ 错误：
white-space: normal只写在inline-block子元素上（无效） - ⚠️ 注意：若父容器是
flex或grid，它默认忽略white-space对子项布局的影响，此时inline-block退化为普通块级表现，得换思路
长单词/URL不换行？加这两个CSS就够了
white-space: normal只能处理有空格的文本；遇到https://very-long-url-with-no-spaces.com或Supercalifragilisticexpialidocious，必须额外声明断词策略。
- 优先用
overflow-wrap: break-word（推荐）：在必要时打断长单词，兼容性好（IE11+） - 备选
word-break: break-word（旧写法，已废弃但仍广泛支持） - 避免用
word-break: break-all：它会强行切任意位置，中文也会被乱劈，体验差 - 记得同时设
max-width: 100%，否则inline-block可能无视父容器约束继续撑宽
inline-block + 白空间换行的真实性能代价
表面上只是加几行CSS，但inline-block会触发浏览器创建新的**行内格式化上下文（IFC）**，比纯flex或grid多一层布局计算——尤其在大量动态插入的标签场景下，容易卡顿。
- DOM节点超过200个时，
inline-block的重排开销明显高于display: flex+flex-wrap: wrap - 移动端Safari对
inline-block内vertical-align的处理有渲染bug，常导致底部空白或错位 - 如果只是为了“内容撑宽+换行”，更稳的替代方案是：
display: inline-flex+flex-direction: column+width: max-content（但注意max-content兼容性）
最易被忽略的一点：inline-block元素间的HTML空格会被渲染成1个空格字符，导致不可控间隙——这不是bug，是规范行为，但没人记得删换行符或用注释hack。
