Why are individual modules and block elements of the same size wrapped differently?

Question

I noticed that the block element wraps around word-wrap: break-word; differently word-wrap: break-word; and then the inline-block element with the same size. Can anyone explain why? I would expect them to act the same way, since both elements correspond to their content, block .

Here is the code:

 <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> 

And here is a screenshot of the result (you need to resize the browser so that it turns around):

Tested in Chrome, FF and IE11.

Update

I would like to indicate that both elements have the same width when checking in the element inspector.

Answer 1

Declaration: Declaring an inline block makes an element compressible to match its contents. In order for both of them to break words in the same place, they must have the same width. In your case, I believe you should use a width: 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> 

I looked at him on firebug and realized that without declaring the width they have different widths on the layout tab.

Answer 2

Elements in a line box have some box-model properties: borders, margin, padding, but its default auto sizes, that is, are only as wide and high as its contents.