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