title: word-break: break-word not working in Firefox and IE
body: <p>I am using flexbox and trying to handle long strings that don't have spaces. The variable <code>word-break: break-word</code> is ideal for me because it breaks only long words unlike <code>word-break: break-all</code> that brakes also short words instead of dropping them to the next line.</p>
  
  <p>My problem is that it works only in Chrome. Is there a way to get working also in IE / FIREFOX <strong>(With flexbox)</strong> ?</p>
  
  <p>Codepen: <a href="https://codepen.io/anon/pen/wqLmoO" rel="nofollow noreferrer">https://codepen.io/anon/pen/wqLmoO</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.page {
    display: flex;
    justify-content: center;
  }
  
  .content {
    display: flex;
    border: 2px solid blue;
    justify-content: center;
  }
  
  .item {
    display: flex;
    width: 33vw;
    word-break: break-word;
  }
  
  .item_brake_all {
    display: flex;
    width: 33vw;
    word-break: break-all;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;p align=center&gt;&lt;b&gt;&lt;u&gt;Can I get the two top DIVS to display correctly in IE / FIREFOX?&lt;/b&gt;&lt;/u&gt;
  
    &lt;p align=center&gt;In this div the word should brake:
      &lt;div class="page"&gt;
  
  
        &lt;div class="content"&gt;
          &lt;div class="item"&gt;DavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavidDavid&lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;p align=center&gt;In this div no word should brake:
        &lt;div class="page"&gt;
  
  
          &lt;div class="content"&gt;
            &lt;div class="item"&gt;In this div the words should not brake because all the words are small. If a specific reaches the end of the container and has no room it should just fall to next line. With 'brake-all' the browser will brake the word like in the example below.&lt;/div&gt;
  
          &lt;/div&gt;
        &lt;/div&gt;
  
        &lt;p align=center&gt;&lt;b&gt;Example why I dont want to use brake-all:&lt;/b&gt;
          &lt;div class="page"&gt;
  
  
            &lt;div class="content"&gt;
              &lt;div class="item_brake_all"&gt;In this div the words should not brake because all the words are small. If a specific reaches the end of the container and has no room it should just fall to next line. With 'brake-all' the browser will brake the word.&lt;/div&gt;
  
            &lt;/div&gt;
          &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>