Question

I have the following collapsible content with jQuery Mobile. How can I stop the heading being shortened?

At the moment the text is cut off so it reads something like ‘Really long heading…’ Do I need to do this manually with css or is there a JQB setting I can change?

    <div data-role="collapsible">
        <h4>
            Really long heading goes here thats wider than the page width
        </h4>
        <p>
            Content Content Content Content Content Content 
        </p>
    </div>

Here is the documentation
http://jquerymobile.com/test/docs/content/content-collapsible.html

It seems this CSS is causing the behavior. I could overwrite this rule if there isnt a standard JQM method for doing this.

.ui-btn-inner {
white-space: nowrap;
}

Answer 1

You need to remove this css:

white-space: nowrap; 

from its inner span (span witch wrap’s text). Or replace it with:

white-space: normal;

Or change jQM css file (.ui-btn-inner) but this will also effect every other element using this class.

Or use this line:

$('div[data-role="collapsible"] h4 a span span.ui-btn-text').css({'white-space':'normal'});

There’s no other way, or at lease not buy changing some jQM UI element attribute.