Question

I’m using JQuery mobile’s collapsible set, and my long header titles are being truncated (and made unreadable) when viewed on mobile devices.

For example the header defined here:

<div data-role="collapsible-set">
  <div data-role="collapsible">
    <h3>My header with lots of text that gets truncated when viewing on mobile device or small screen.</h3>
    <fieldset data-role="controlgroup">
    ...

Ends up being truncated to:
My header with lots of text…

Following the advice of other posts, I tried:

<style type="text/css">
  .ui-header .ui-title .ui-btn-text .ui-collapsible-heading {
    overflow: visible !important;
    white-space: normal !important;
  }
</style>

…to no avail.

Answer 1

Here is the necessary CSS to make the title of a collapsible set multi-line:

.ui-mobile .ui-page .ui-content .ui-collapsible .ui-collapsible-heading .ui-btn-text {
    white-space : normal;
}​

Notice I targeted the .ui-btn-text element that is a descendant of the .ui-collapsible-heading element to get the desired effect.

This makes a very specific rule that will overwrite the default jQuery Mobile styling without the need to use !important.

Here is a demo: http://jsfiddle.net/JaPdC/