title: Word wrapping in unordered list in html
body: <pre><code>&lt;ul class="notice-ul"&gt;
  &lt;li class="notice-word-wrap"&gt;Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered&lt;/li&gt;
  &lt;li&gt;Delivered&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Above is the my unordered list in html.
  css for the above:</p>
  
  <pre><code>.notice-ul{
      list-style: none;
  }
  
  .notice-ul &gt; li:before { 
   content:"\2713\0020"; 
   } 
  
  .notice-word-wrap{
      display: block; 
      width: auto;
      height: auto;
      word-break: break-all;
      word-wrap: break-word; 
      white-space: normal
  }
  </code></pre>
  
  <p>The problem I face here is about wrapping of first list where words are not breaking correctly. Attaching the result of above:<a href="http://i.stack.imgur.com/1uLjU.jpg" rel="nofollow">Result in UI</a></p>