4

I noticed that a block element wraps differently with word-wrap: break-word; then an identically sized inline-block element. Can anybody explain why? I would have expected them to act the same since both elements are, relative to their contents, 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 have to resize your browser to make it wrap):

enter image description here

Tested in Chrome, FF and IE11.

Update

I would point out that both elements are the exact same width when examined in the elements inspector.

JosiahDaniels
  • 2,411
  • 20
  • 37
  • You might want to check out this question and, in particular, the second answer - http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break – Paulie_D Aug 07 '15 at 11:09
  • While an informative answer, I don't think it applies in my case where I'm seeing different wrapping behavior when both elements are set to `word-wrap:break-word`. – JosiahDaniels Oct 30 '15 at 12:07
  • When I look at it on firebug, they have different widths on the layout tab. – Lucas Rodrigues Oct 30 '15 at 12:15

2 Answers2

1

The display: inline-block declaration makes the element shrink to fit its contents. In order to make both of them break words at the same place, they must have the have the same width. In your case, I believe that you should use 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 took a look at it on firebug, and realized that without the width declaration they have different widths on the layout tab.

Lucas Rodrigues
  • 1,234
  • 2
  • 11
  • 22
-1

Inline-block elements have some box-model properties: borders, margin, padding, but its dimensions are auto by default, i.e. only as wide and high as its content.

meskobalazs
  • 15,741
  • 2
  • 40
  • 63
Arun Kumar M
  • 1,633
  • 1
  • 15
  • 26
  • True. But the interesting bit of my question is that both elements are exactly the same size. you can see this when looking at the dimensions panel in the devtools. – JosiahDaniels Aug 14 '15 at 08:15