Question

I am building in jQuery mobile framework.
I have the following structure that I want to display in a kind of table layout:

<div style="word-wrap:break-word" class="ui-block-n" ><li>verylongword.........</li></div>

My problem is that when I have long words, the words go outside of the div (i.e. overflow). I would like the words to be wrapped.
I used word-wrap:break-word, but this doesn’t seem to work. I also tried all of these options, with no success:

 white-space: pre-wrap;      
 white-space: -moz-pre-wrap; 
 white-space: -pre-wrap;     
 white-space: -o-pre-wrap;   
 word-wrap: break-word;  

How can I get my words to wrap?

Answer 1

You need the whole word-wrap thing on your li’s:

<style>
li {
word-wrap:break-word;
}
</style>