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>