JQuery Mobile – Stop some key items from being truncated

One feature of the library (or flaw, depending on your needs) is that it intelligently truncates long items to fit into UI elements.
I have found two situations where this can be annoying. First, in list items, where I prefer to see the full text. And secondly, in the footer text.

It seems once you have more than just a few characters down there, it starts getting truncated with “…”. Use this simple CSS to override both of these defaults.

For list items:

body .ui-li .ui-li-desc {
white-space: normal;

For footer content:

body .ui-footer .ui-title {
white-space: normal;

Leave a Reply

Your email address will not be published. Required fields are marked *