jQuery mobile: Enable Word Wrap in ListViews

问题:

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?

回答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>

回答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.

回答3:

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

回答4:

In jQuery mobile 1.4.4 this worked:

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