title: word break in ie7
body: <p>I need to allow word break/word wrap in the following structure :</p>
  
  <pre><code>&lt;ul&gt;
      &lt;li&gt;&lt;strong&gt;Forename&lt;/strong&gt;&lt;span&gt;forename value&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Forename&lt;/strong&gt;&lt;span&gt;forename value&lt;/span&gt;&lt;/li&gt;
      &lt;li&gt;&lt;strong&gt;Forename&lt;/strong&gt;&lt;span&gt;forename value&lt;/span&gt;&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>I can't fix a width to the span or li as the number of li's might vary. Making li to display as <strong>table-cell</strong> helps to word-break the span content like shown in the image.</p>
  
  <p><img src="https://i.stack.imgur.com/1H7za.png" alt="enter image description here"></p>
  
  <ul>
  <li><strong>Is there a way to make IE7 behave/understand table-cell ?</strong></li>
  </ul>
  
  <p><strong>Edit :</strong> </p>
  
  <p>My original problem is I'm trying to achieve a display like shown in the image below, but just that the content is getting cut at the right if long unbroken strings are given as input, instead of breaking the word. </p>
  
  <ol>
  <li><p>I'm wondering why <strong>word-break:break-all</strong> doesn't take effect unless when span is made block or inline-block ?</p></li>
  <li><p>Even when span is made inline-block, the next problem is how to make the subsequent content flow on the continuos line ?</p></li>
  </ol>
  
  <p>Attached image : <a href="https://i.stack.imgur.com/1gB92.png" rel="nofollow noreferrer">http://i.stack.imgur.com/1gB92.png</a></p>
  
  <p>Any thoughts please ?</p>