为何inline与inline-block元素的默认自动换行/溢出行为存在差异？

核心差异：换行逻辑的本质不同 #

• inline元素的换行规则
  inline元素属于行内流的一部分，多个相邻的inline元素会被合并成一个匿名行内盒子，里面的内容被视为连续的文本序列。浏览器只会在文本的自然分隔点（比如空格、标点）处换行，如果没有这些分隔点，整个连续内容就会超出容器宽度，直接溢出。

• inline-block元素的换行规则
  inline-block是独立的行内块盒子，每个元素都是一个不可拆分的布局单元。浏览器在布局时会逐个判断当前行剩余空间是否能放下下一个inline-block盒子，放不下就直接换行到下一行，不会把多个inline-block合并成一个连续文本处理。

为什么设置word-wrap: break-word后表现一致？ #

word-wrap: break-word（现行规范中对应overflow-wrap: break-word）的作用是强制浏览器在必要时拆分长文本序列，哪怕没有自然分隔点也能换行。给容器设置这个属性后，inline元素的连续文本会被强制拆分换行，就和inline-block逐个盒子换行的视觉效果一致了。

官方规范参考 #

相关规则可以在CSS官方规范中找到：

• CSS 2.1规范的「行内格式化上下文」章节，定义了inline元素的匿名盒子和换行逻辑
• CSS Display Module Level 3中关于inline-block的定义，明确它是参与行内流的块容器盒子

示例代码 #

React组件代码

export default function App() {
  const arr = new Array(50).fill("inline");
  const arr2 = new Array(50).fill("inline-block");
  return (
    <div className="App">
      {arr.map((text) => (
        <div className="inline-div">{text}</div>
      ))}
      {arr2.map((text) => (
        <div className="inline-block-div">{text}</div>
      ))}
    </div>
  );
}

CSS样式

.inline-div {
  display: inline;
  color: red;
}

.inline-block-div {
  display: inline-block;
  color: blue;
}

.App {
  background-color: lightblue;
}

内容的提问来源于stack exchange，提问作者Sendai