Question

I’m using the jQuery mobile basic list to display a list of products. (basic list example). If there are too many characters in the h3, the title is snipped and displayed with “…” at the end. Is there a way to display the complete h3 in a new line or something?

e.g:

   --------------------------------------------------
   This is a super long ti...
   --------------------------------------------------
   This is a super long title
   displayed in two lines
   --------------------------------------------------

This is the code

<ul data-role="listview" data-theme="c">
  <li>                                   
    <a href="bar">
      <h3>Title</h3> <----
      <p>Description</p>
      <span class="ui-li-count">$12.99</span>';
    </a>
  </li>
...
</ul>

Answer 1

I think you need to override some of the JQM css styles that are applied to those listview titles:

<h3 style="word-wrap: break-word; white-space: pre-wrap;"> long title here </h3>

Check out this example here: http://jsfiddle.net/shanabus/DTNJ4/

Hope this helps!