jQuery mobile：在ListViews中启用Word Wrap

Question

我有一个listview（见下图），我想用自动换行所有内容而不是添加...到长行。

这是怎么做到的？

Answer 1

您只需要更新包含列表项中文本的.ui-li-desc元素的CSS：

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

以下是演示：http://jsfiddle.net/Xc6PJ/

white-space的一些优秀文档：https://developer.mozilla.org/en/CSS/white-space

以下是jQuery Mobile初始化后我的测试listview中的示例列表项：

<li class="ui-li ui-li-static ui-body-c">
    <h3 class="ui-li-heading">Sample Title</h3>
    <p class="ui-li-desc">
        Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content
    </p>
</li>

Answer 2

我的建议是在<li>中使用Div并设置您想要的特定行为，而不是更改jquery mobile css的整体行为。有了这个，你只能按照你想要的方式行事。

Answer 3

在li部分内添加div style="white-space:normal;"部分，强制自动换行。

Answer 4

在jQuery mobile 1.4.4中，这有效：

.ui-listview > li p {
  white-space: normal;
}