In chrome, word-wrap: break-word breaks words even if there is no space

Question

The following markup and CSS causes weird behavior in Chrome:

#parent { background: yellow; height: 120px; margin-bottom: 20px; width: 100px; word-wrap: break-word; } #box { background: red; float: left; height: 100px; width: 100%; } 

 <div id="parent"> <div id="box"></div> <div>OIL</div> </div> <div id="parent"> <div id="box"></div> <div>OWL</div> </div> 

Fiddle: https://jsfiddle.net/7sq3ybxr/

The top example (containing the word OIL) causes word breaks, although there is literally no space on the right. Lower - no. I guess this has something to do with character width. In other browsers, the word is always displayed below the field, as expected.

Does anyone know what causes this behavior or is there an idea for a workaround? However, the size, float, and word-wrap properties should remain.

Edit: Oh, by the way, writing markup like this seems to fix it, but that’s not what I control (imagine user input through tinyMCE):

 <div id="parent"> <div id="box"></div> <div> OIL </div> </div> 

Answer 1

This seems like a bug in Chrome.

In Chrome 50.0.2661.102 m the expected result was displayed

Chrome 51.0.2704.103 m displays unwanted result

What can be done to avoid this problem?

I suppose this error will be fixed in time, but for now you can use letter-spacing to increase the number of spaces made by letters and to force the expected behavior.

 .parent { background: yellow; height: 120px; margin-bottom: 20px; width: 100px; word-wrap: break-word; } .box { background: red; float: left; height: 100px; width: 100%; } .word { letter-spacing: 1.8px; } 

 <div class="parent"> <div class="box"></div> <div class="word">OIL</div> </div> <div class="parent"> <div class="box"></div> <div class="word">OWL</div> </div> 

Js fiddle

Answer 2

Floating elements in css cause such errors. In previous versions of Internet Explorer, we often saw similar problems.

If I float one element and want the rest to remain intact, I usually use "clear: both" for the next element, so that this element and the elements after that do not execute.

Answer 3

Give a space after OIL or any indestructible word. This may fix the error. Because word-wrap breaks all the alphabets in a word.

 #parent { background: yellow; height: 120px; margin-bottom: 20px; width: 100px; word-wrap: break-word; } #box { background: red; float: left; height: 100px; width: 100%; } 

 <div id="parent"> <div id="box"></div> <div>OIL </div> </div> <div id="parent"> <div id="box"></div> <div>OWL</div> </div> 

Answer 4

 #parent { background: yellow; height: 120px; margin-bottom: 20px; width: 100px; word-wrap: break-word; } #box { background: red; height: 100px; float:left; width: 100%; } .box-2 { clear:both; } 

 <div id="parent"> <div id="box"></div> <div class="box-2">OIL</div> </div> <div id="parent"> <div id="box"></div> <div> OIL </div> </div> 

Answer 5

Floating elements are inactive, so they overlap the following blocks if they do not set the formatting context of the block. This should not be a problem because the linear margins are reduced, so the text should be shifted below the float in the full width width field.

However, for some reason, this layout is confusing for Chrome. To fix this, you can set the formatting context of the block using display: inline-block .

 #parent { background: yellow; height: 120px; margin-bottom: 20px; width: 100px; word-wrap: break-word; } #box { background: red; float: left; height: 100px; width: 100%; } #box + div { display: inline-block; } 

 <div id="parent"> <div id="box"></div> <div>OIL</div> </div> <div id="parent"> <div id="box"></div> <div>OWL</div> </div>