Problems with word-break css

Question

I'm using jquery mobile with phonegap on android. I have css style

.itemClass p{
    width:100%;
    min-height:50px;
    text-transform:capitalize;
    word-break:break-all !important;
    word-wrap:break-word !important;
}

I'm creating ul dynamivcally like this

...
var out = '<ul data-role="listview">';
$(data["data"]).each(function(index, element){
    out += '<li class="itemClass"><p>' + element.text + '</p></li>';
});
out += "</ul>";
...

Styles word-break and word-wrap not applying to items.

Answer 1

Your Code is correct.

It is working fine, see this Fiddle But still we can try to add "width" to it's parent <li> .

There will be possibility that other CSS may Override your correct code.

You can Try this:

.itemClass {
   width:100%;  
}