title: word-wrap: break-word on li (list items)?
body: <p>I am trying to create a menu that looks like the image linked. (http://i.stack.imgur.com/BCiqJ.jpg).
  I thought it would be really simple, but I ran into problems with trying to break the words with CSS only. This is for a cms, so it would be important for the markup to be:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt; etc...
  &lt;/ul&gt;
  </code></pre>
  
  <p>In case the image link is broken, Im trying to create a menu with no space between words and with words breaking in the middle to accommodate to the width of the <code>&lt;ul&gt;</code></p>
  
  <p>such as:
  <br/>
  <strong>HOME</strong><em>VID<br />EOS</em><strong>MUSI<br />C</strong><em>CALEND<br />AR</em><strong>EVENT<br />S</strong><em>PHOTO<br />S</em><strong>ABOUT</strong><em>C<br />ONTACT</em></p>
  
  <p>I faked it here by using manually inputed <code>&lt;br /&gt;</code> line break tags... is there a way to make this happen with CSS?</p>