jQuery手机：在ListViews中启用Word Wrap

Question

我有一个列表视图（请参阅下面的照片），我想将所有内容换行而不是将...添加到长行。

这是如何完成的？

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

这是一个示例li jQuery Mobile的之后，从我的测试listview ST-项目已初始化它：

<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移动的整体行为CSS。有了这个，你可以只有特定的事情按照你想要的方式行事。

Answer 3

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

Answer 4

在jQuery Mobile的1.4.4这个工作：

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