jQuery移动端：启用列表视图的自动换行功能

Question

我有一个列表视图（见下面的照片），我想换行所有内容，而不是在长行后添加...。

如何实现？

- Ian Vink

---

你能否发布一下你所拥有的单个列表项的代码？ - Jasper

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>

- Jasper

Answer 2

我的建议是在<li>标签中使用一个div，设置你想要的特定行为，而不是改变整体的jquery mobile css行为。这样你就可以只让特定的东西按照你想要的方式运作。

- Amar Pratap

---

你也可以使用纯CSS来实现这个效果（不需要额外的元素）。你只需要给列表元素应用一个类（或其他类型的标识符），并在CSS选择器中使用该类（或任何其他标识符）。 - Jasper

Answer 3

在 jQuery mobile 1.4.4 中，这个有效：

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

- Michaël Witrant

Answer 4

在 li 部分内添加一个带有 style="white-space:normal;" 属性的 div，该属性可以强制换行。

- taumoeps

---

完美、简单而优雅的解决方案。 - Zaki Anwar Hamdani