```
<ul class="notice-ul">
<li class="notice-word-wrap">Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered,Delivered</li>
<li>Delivered</li>
</ul>

```

Above is the my unordered list in html.
css for the above:

```
.notice-ul{
    list-style: none;
}

.notice-ul > 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
}

```

The problem I face here is about wrapping of first list where words are not breaking correctly. Attaching the result of above:[Result in UI](http://i.stack.imgur.com/1uLjU.jpg)