I have this list:

<ul id="linksList"
    data-role="listview"
    data-inset="true"
    data-filter="true">
    <!-- Dynamic contents! -->
</ul>

It gets its data from a local XML file (RSS feed). All I want is for the titles to either wrap down or show more of the title within the buttons, as I have probably two thirds of the button left to fill with text.

Screenshot Link

Thank you for any help!

I have this list:

<ul id="linksList"
    data-role="listview"
    data-inset="true"
    data-filter="true">
    <!-- Dynamic contents! -->
</ul>

It gets its data from a local XML file (RSS feed). All I want is for the titles to either wrap down or show more of the title within the buttons, as I have probably two thirds of the button left to fill with text.

Screenshot Link

Thank you for any help!

• javascript
• jquery
• css
• jquery-mobile

• What else do you want? i shall edit with it – CandiedMango Commented Sep 4, 2013 at 15:28
• 1 Whatever it would take to rebuild your problem from scratch. Best if you could produce a working problem on jsfiddle. – Samuel Liew Commented Sep 4, 2013 at 15:30
• The problem is a fairly mon one where jQuery Mobile's base CSS strong-arms the list items into overflowing into ellipses. I've edited the OP with a bit more information on the subject, but a quick test in Firebug shows that my solution below should fix things. – David Millar Commented Sep 4, 2013 at 15:41
• Hi dave, i'm quite the novice to be honest with you. When putting your fix into a css file how would i reference my list? i.e would i just use the id? as i know there are special identifiers for jqms listviews and such – CandiedMango Commented Sep 4, 2013 at 15:45

3 Answers 3

You need to override the jQuery Mobile default of showing ellipsis for the elements you want to have wrap:

overflow:hidden;
text-overflow:ellipsis;
white-space: nowrap;

bees:

overflow: visible;
text-overflow: clip;
white-space: normal;

I remend doing this on an as-needed basis using your own classes rather than modifying the base code.

I didn't have to change text-overflow. also.. I added in the class names. Copy and paste the following:

.ui-li-heading, .ui-li-desc { 
  overflow: visible; 
  white-space: normal; 
}

The ellipses are caused by jQuery mobile setting widths and setting the overflow to ellipses. You would need to go into the CSS on the item and set the margins to use less space.