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

概述我注意到一个块元素用word-wrap包装不同：break-word;然后是一个相同大小的内联块元素.谁能解释为什么？我希望它们的行为相同,因为两个元素相对于它们的内容都是阻塞的. 这是代码： <span style="word-wrap:break-word; display: inline-block;"> XX-standard-com.longtext.nogoodexperience.h 我注意到一个块元素用word-wrap包装不同：break-word;然后是一个相同大小的内联块元素.谁能解释为什么？我希望它们的行为相同,因为两个元素相对于它们的内容都是阻塞的.

这是代码：

<span > XX-standard-com.longtext.nogoodexperIEnce.howtoresolve_nofix.yyy</span><br/><br/><span > XX-standard-com.longtext.nogoodexperIEnce.howtoresolve_nofix.yyy</span>

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

在Chrome,FF和IE11中测试过.

更新

我要指出,在元素检查器中检查时,两个元素的宽度完全相同.

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

<span > XX-standard-com.longtext.nogoodexperIEnce.howtoresolve_nofix.yyy</span<br/><br/><span > XX-standard-com.longtext.nogoodexperIEnce.howtoresolve_nofix.yyy</span>

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

总结

以上是内存溢出为你收集整理的html – 为什么大小相同的内联块和块元素换行不同？全部内容，希望文章能够帮你解决html – 为什么大小相同的内联块和块元素换行不同？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。