为什么大小相同的内联块和块元素换行不同？

Question

我注意到block元素与word-wrap: break-word;的包装方式不同，后面包含相同大小的inline-block元素。谁能解释为什么？我希望它们的行为相同，因为这两个元素相对于它们的内容block。

这是代码：

<span style="word-wrap:break-word; display: inline-block;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span><br/><br/>
<span style="word-wrap:break-word; display: block;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span>

以下是结果的屏幕截图（您必须调整浏览器的大小以使其换行）：

在Chrome，FF和IE11中测试过。

更新

我想指出，在元素检查器中检查时，两个元素的宽度完全相同。

Answer 1

display：inline-block声明使元素缩小以适合其内容。为了使它们在同一个地方打破单词，它们必须具有相同的宽度。在你的情况下，我认为你应该使用宽度：100％。

<span style="word-wrap:break-word; display: inline-block; width: 100%;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span
<br/><br/>
<span style="word-wrap:break-word; display: block; width: 100%;"> XX-standard-com.longtext.nogoodexperience.howtoresolve_nofix.yyy</span>

我在firebug上看了一下，并意识到没有宽度声明它们在布局选项卡上有不同的宽度。

Answer 2

内联块元素具有一些框模型属性：边框，边距，填充，但默认情况下其尺寸为auto，即仅与其内容一样宽和高。