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

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

The following markup and CSS causes weird behaviour 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%;  }

    
    
OIL
  
  
    
    
OWL
  

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

The upper example (containing the word OIL), causes word breaks even though there is literally no room to the right. The lower one doesn't. I'm assuming it's got something to do with the character width. In other browsers, the word is always displayed below the box, as expected.

Does anybody know what causes this behaviour or have an idea for a workaround? The size, float and word-wrap properties must stay, however.

Edit: Oh, by the way, writing the markup like this seems to fix it, but it's not something I have control over (imagine user input via tinyMCE):

      
      
          OIL      
  
  

Answer by Demeter Dimitri for in chrome, word-wrap: break-word breaks words even if there is no space

Floating elements in css causes errors like this. In previous versions of Internet explorer, we used to see problems like this all the time.

If I float one element, and want others stay intact, I usually use "clear:both" on the next element so that that element and the elements after that would not be effected.

Answer by Regolith for in chrome, word-wrap: break-word breaks words even if there is no space

Give a space character after the OIL or any unbreakable word. This might fix the error. Since word-wrap is breaking all the alphabets in the word.

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

    
    
OIL 
  
    
    
    
OWL
  

Blockquote

Answer by Sarika for in chrome, word-wrap: break-word breaks words even if there is no space

#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;  }

        
        
OIL
      
      
          
          
              OIL          
      

Answer by Hidden Hobbes for in chrome, word-wrap: break-word breaks words even if there is no space

This appears to be a bug in Chrome.

In Chrome 50.0.2661.102 m the expected result was displayed

In Chrome 51.0.2704.103 m the undesired result is displayed

What can be done to avoid this issue?

I imagine that this bug will be fixed in time, but in the meantime you could use letter-spacing to increase the amount of space taken by the letters and force the expected behaviour.

.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;  }

    
    
OIL
  
  
    
    
OWL
  

JS Fiddle

Answer by Oriol for in chrome, word-wrap: break-word breaks words even if there is no space

Floating elements are out-of-flow, so they overlap following blocks, unless they establish a block formatting context. That shouldn't be a problem, because line boxes are reduced, so the text should be pushed below the float in a full-width line box.

However, for some reason, this layout confuses Chrome. To fix this, you can establish a block formatting context with 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;  }

    
    
OIL
  
  
    
    
OWL
  

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72