listview with white-space for jquery mobile

My Code:

<div data-role="content" id="merlin">
  <div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
    <div data-role="collapsible">
       <h2>That is a serious problem and I don't know how to solve it</h2>
       <ul data-role="listview">
         <li>some content</li>
       </ul>
    </div>
  </div>
</div>

Output: http://s14.directupload.net/images/140117/6foqxhjr.png

What I want: White-Space (or say word wrap?) to read the whole heading

What I've tried:

#merlin {
  white-space: normal;
}

or

.ui-page .ui-content .ui-listview .ui-li-desc {
   white-space: normal;
}​

You need to target the class ui-btn-text and try this selector:

#merlin .ui-btn-text {
  white-space: normal;
}

Check this Demo Fiddle