jQuery mobile: Enable Word Wrap in ListViews

Question

I have a listview (see photo below) that I would like to word wrap all the contents instead of adding ... to the long lines.

How is this done?

Answer 1

You just need to update the CSS for the .ui-li-desc element that holds the text in your list-item:

​.ui-page .ui-content .ui-listview .ui-li-desc {
    white-space : normal;
}​

Here is a demo: http://jsfiddle.net/Xc6PJ/

Some good documentation for white-space: https://developer.mozilla.org/en/CSS/white-space

Here is a sample list-item from my test listview after jQuery Mobile has initialized it:

<li class="ui-li ui-li-static ui-body-c">
    <h3 class="ui-li-heading">Sample Title</h3>
    <p class="ui-li-desc">
        Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content
    </p>
</li>

Answer 2

My suggestion would be to use a Div within the <li> and set the specific behavior you want rather than changing the overall behavior of the the jquery mobile css. With this you can have only the specific thing to behave the way you want.

Answer 3

Inside the li section add a div with style="white-space:normal;" section which forces word-wrap.

Answer 4

In jQuery mobile 1.4.4 this worked:

.ui-listview > li p {
  white-space: normal;
}