title: Break long words in html email in outlook 2010
body: <p>I'm taking end user input and inserting it into an HTML email.  But if the end user enters a long URL or really long word, it breaks my HTML layout in Outlook 2010 by extending the column or div beyond the width specified.</p>
  
  <p>In Chrome, Firefox, IE7+, and Safari, I can use style="table-layout:fixed" in order to force the table columns to certain widths.  But Outlook 2010 ignores this, and the long word pushes the table width out beyond the fixed width.</p>
  
  <p>With Divs, In Chrome, Firefox, IE7+, and Safari, I can use style="word-wrap:break-word; overflow:hidden; width:100px", to fix the div width. But in Outlook 2010, it pushes the div out beyond the fixed width.</p>
  
  <p>How can I get outlook2010 to wrap the long word, and honor the fixed width?</p>
  
  <p>Here is my sample HTML:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;table width="400" style="table-layout: fixed" border="1"&gt;
      &lt;tr&gt;
          &lt;td width="100"&gt;
              yo
          &lt;/td&gt;
          &lt;td width="300"&gt;
              Don't move me
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table width="400" style="table-layout: fixed" border="1"&gt;
      &lt;tr&gt;
          &lt;td width="100" style="word-wrap: break-word; overflow: hidden; width: 100px" border="1"&gt;
              yoooooooooooooooooooooooooooooooooooooooooooooooooooooo
          &lt;/td&gt;
          &lt;td width="300"&gt;
              Ya moved me
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;table width="400" border="1"&gt;
      &lt;tr&gt;
          &lt;td width="100"&gt;
              &lt;div style="word-wrap: break-word; overflow: hidden; width: 100px" border="1"&gt;
                  yoooooooooooooooooooooooooooooooooooooooooooooooooooooo
              &lt;/div&gt;
          &lt;/td&gt;
          &lt;td width="300"&gt;
              Ya moved me
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>