jquery mobile 的带有空白的列表视图

Question

我的代码：

<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>

输出：

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

我想要的：

空白（或者说自动换行？）来阅读整个标题

我尝试过的：

#merlin {
    white-space: normal;
}​

或

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

Answer 1

您需要定位类

ui-btn-text

并尝试此选择器：

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

检查这个演示小提琴