title: CSS Word-wrap is cutting words in half
body: <p>I have a div element set up</p>
  
  <pre><code>&lt;div id="foo" class="bar"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>where bar </p>
  
  <pre><code>bar{word-wrap:break-word;white-space:normal;overflow-x:no-scroll;overflow-y:scroll;POSITION:static;display:inline-block;text-align:left;}
  </code></pre>
  
  <p>However several words are being cut in half at the end of the area.</p>
  
  <p>I've tried setting the word-wrap property to normal, initial and inherit with no success.</p>
  
  <p>Am i misunderstanding the functionality of word wrap?</p>
  
  <p><img src="https://i.stack.imgur.com/pubvP.png" alt="Words are not wrapped?"></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>by using break-word i get this</p>
  
  <p><img src="https://i.stack.imgur.com/xumsu.png" alt="enter image description here"></p>
  
  <p><strong>EDIT</strong>
  This is the whole css for bar. </p>
  
  <pre><code>.bar{BORDER:1px solid;height:&lt;%=nHeight%&gt;px;width:&lt;%=nWidth/2%&gt;px;max-width:&lt;%=nWidth/2%&gt;px; word-wrap:break-word;white-space:normal;overflow-x:no-scroll;overflow-y:scroll;POSITION:static;background-color:#FFFFFF;cursor:default;display:inline-block;margin-top:6px;text-align:left;}
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>Seems i run css 2.1</p>