title: How to mimic word-break: break-word; for IE9, IE11 and Firefox
body: <p>How to mimic <code>word-break: break-word;</code> for IE9, IE11 and Firefox?</p>
  
  <p>It seems to work in Chrome. I have learnt and understood that it is a is non-standard, webkit only. </p>
  
  <p>FYI, I have tried using, </p>
  
  <pre><code>white-space: pre-wrap;
  </code></pre>
  
  <p>And some more like,</p>
  
  <pre><code>   overflow-wrap: break-word;
  </code></pre>
  
  <p>Also tried the below mentioned CSS,</p>
  
  <pre><code> word-wrap:  break-word;
   word-break: break-word;
  </code></pre>
  
  <p>But these don't seem to work. </p>
  
  <blockquote>
    <p>I can't provide fixed width to the span(which contains the text) by making it <code>display: block;</code> explicitly as the text is dynamic and will differ according to the user's Geo-location. Currently we support around 18 languages. </p>
  </blockquote>
  
  <p>This is how the code looks, </p>
  
  <p>The html,</p>
  
  <pre><code>&lt;div id="grid2"&gt;
       &lt;span id="theSpan"&gt;Product Support&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS,</p>
  
  <pre><code>#theSpan{
     white-space: pre-wrap;      /* CSS3 */   
     white-space: -moz-pre-wrap; /* Firefox */    
     white-space: -pre-wrap;     /* Opera 7 */   
     white-space: -o-pre-wrap;   /* Opera 7 */    
     word-wrap: break-word;      /* IE */
     word-break: break-all;
  }
  
  #grid2{
     width: 100px;
  }
  </code></pre>
  
  <p>It looks like this,</p>
  
  <p><a href="https://i.stack.imgur.com/zYxAC.png" rel="noreferrer"><img src="https://i.stack.imgur.com/zYxAC.png" alt="enter image description here"></a></p>
  
  <p>I want it to be like,</p>
  
  <p><a href="https://i.stack.imgur.com/v0niI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/v0niI.png" alt="enter image description here"></a></p>
  
  <p><strong>Please note:</strong><br>
  I had to use <code>word-break: break-all;</code> as for Some of the languages the translated text is too long and it overflows out of the grid. The text 'Product Support' is dynamic.</p>
  
  <p><strong>Update:</strong><br>
  I have a fixed width for the div with id, grid2. In one of the languages the translated text is too long, it's a Single word and it flows out of the grid2 div.</p>
  
  <p>Updated the code too.</p>