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

admin管理员组

文章数量:1023758

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

Share Improve this question Follow edited Sep 4, 2013 at 15:38 David Millar 1,87811 gold badge1414 silver badges2323 bronze badges asked Sep 4, 2013 at 15:24 CandiedMangoCandiedMango 27944 silver badges1616 bronze badges 4

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

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

Share Improve this question Follow edited Sep 4, 2013 at 15:38 David Millar 1,87811 gold badge1414 silver badges2323 bronze badges asked Sep 4, 2013 at 15:24 CandiedMangoCandiedMango 27944 silver badges1616 bronze badges 4

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

本文标签： javascriptIn jQuery Mobilehow do I stop list items being cut off with ellipsesStack Overflow