jQueryMobile ListView Text Wrap

css, jquery-mobile, jquery-mobile-listview

Solution

Given your LI markup:

<li>
  <a href="#">
    <img src="http://pbs.twimg.com/profile_images/1225696765/29072010042_normal.jpg" />
    <h3 class="wrap">Marco Alberto Sotelo (@marcosotelo79)</h3>
    <p>Sun Feb 02 20:01:24 +0000 2014</p>
    <p class="wrap">Ya estamis en el estadio MetLife para el @SuperBowl #SBUniversal http://t.co/80 /1wSo5O9E</p>
    <br />
    <img src="http://pbs.twimg.com/media/Bffo-1MCIAEoY5X.jpg" style="max-width: 90%; margin: auto;" />
  </a>
</li>

Change the class wrap to:

.wrap {
    white-space: normal !important;
}

The !important allows the class to override all the jQM classes that are setting it to nowrap.

Here is a DEMO

Problem

In jQueryMobile, listviews truncate text. There are lot of articles and posts like this one that say to add white-space:normal in css. However, this isn't working for me in jQueryMobile 1.4. You can see here. To test you'll need to shrink your browser window size. Any ideas?

Original source