Question

I have the following jquery mobile code:

<div data-role="collapsible">
<h3>I like to read a lot but sometimes I simply can't bring myself to do it</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi iaculis interdum felis, et tempor nunc commodo sit amet. Ut fringilla.  
</p></div>

I need the h3 tag to word wrap as opposed to truncating as jquery mobile does by default.

I’ve tried changing the above h3 tag to:

<h3 style="white-space:normal;">

or adding the following to the style sheet

h3  { white-space:normal; }

or

.h3  { white-space:normal; }

None of which works…any ideas? I could wrap it with line breaks but that’s no good as it looks ugly if someone changes the orientation of their phone.

Thanks

Darren

Answer 1

You had the right idea. JQM just does some funky markup and you were targeting the wrong thing in the end.

 .ui-collapsible h3 .ui-btn-text{white-space:normal;}