title: Internet explorer 10 word-break not working
body: <p>I want the text to wrap accordingly to the width of the table if it is changed. My CSS works everywhere (Firefox, Chrome, even other versions of IE) except for IE 10.</p>
  
  <p>This is the HTML code:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;table class="table"&gt;
      &lt;tbody class="tBody"&gt;
        &lt;tr&gt;
         &lt;td&gt;
            &lt;span class="spanClass"&gt;
               &lt;img src="image.png"&gt;
                &lt;a href=""&gt;This is a verrrrrrrrrrrrrrrrrrrrrrrrrrrrrrryyyyy long
                        text that doesnt work like I want it to. I hate IE.
                &lt;/a&gt;
             &lt;/span&gt;
           &lt;/td&gt;
         &lt;/tr&gt;
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is the CSS:</p>
  
  <pre><code>.container {
    white-space: pre-wrap;
    display: inline-table;
    word-wrap: break-word; 
    word-break: break-all;
   }
  
   table {
    width:100%;
    table-layout:fixed;
   }
  
  .spanClass {
    display: inline-flex;
   }
  </code></pre>
  
  <p>Ive noticed the <code>.spanClass</code> rule may be interfering with what I want, but I need that rule to keep the <code>&lt;img&gt;</code> and <code>&lt;a&gt;</code> elements aligned properly in other browsers.</p>