listview with white-space for jquery mobile

Question

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;
}​

Answer 1

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

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

Check this Demo Fiddle