JQuery Mobile ListView show text on multiple lines

Question

I'm working on a list view with jQuery Mobile and I'm trying to do something similar to this sample: http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-formatting.html

I have a title and a long description text. The problem is that I need the text to start a new line if the screen is too small (or text to long), what happens now is that the text gets cut and added dots ...

<div data-role="content" data-theme="c">
     <ul data-role="listview" data-theme="c">               
     <li>
     <a href="tl1.html" data-transition="fade">
     <img style="margin-left: 8px" width="80" height="80" alt="sample" src="images/sample_event.jpg" align="left"/>
     My band
     <br>
     <font style="font-size: small">
     Event description, enter the event description. Please enter the event description, event            description enter. Add a description of the event.
     </font>
     </a>
     </li>
     </ul>
</div>

Thanks! Marco

Answer 1

The way I did it was to add white-space:normal; to the CSS for that section. Hope that helps.

Answer 2

1. open (jquery.mobile.structure-1.0.min.css) and
2. replace all white-space:nowrap by white-space: normal