CODEWITHSUNDEEP
javascriptjquerycssjquery-mobile
CandiedMango
CandiedMango

Reputation: 279

In jQuery Mobile, how do I stop list items being cut off with ellipses?

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!

Upvotes: 1

Views: 3029

Answers (3)

Shogo Yahagi
Shogo Yahagi

Reputation: 171

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; 
}

Upvotes: 3

David Millar
David Millar

Reputation: 1878

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;

becomes:

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

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

Upvotes: 4

epascarello
epascarello

Reputation: 207537

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.

Upvotes: 0

Related Questions