JQuery Mobile ListView如何在多行中显示文本

Question

我正在使用jQuery Mobile创建一个列表视图，我想要做类似于这个示例的东西： http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-formatting.html

我有一个标题和一段很长的描述文本。 问题是如果屏幕太小（或者文本太长），我需要让文本换行，而不是像现在一样被截断并添加省略号 ...

<div data-role="content" data-theme="c">
     <ul data-role="listview" data-theme="c">               
     <li>
     <a href="tl1.html" data-transition="fade">
     <img style="margin-left: 8px" width="80" height="80" alt="sample" src="images/sample_event.jpg" align="left"/>
     My band
     <br>
     <font style="font-size: small">
     Event description, enter the event description. Please enter the event description, event            description enter. Add a description of the event.
     </font>
     </a>
     </li>
     </ul>
</div>

谢谢！ Marco

- MataMix

Answer 1

我所做的方式是将white-space:normal;添加到该部分的CSS中。希望能有所帮助。

- Jordan Gagne

Answer 2

ruthc68来自jQuery Mobile官方论坛，回答了这个问题：

<font style="white-space:normal; font-size: small" >

希望这能节省某人的时间 :)

- MataMix

Answer 3

1. 打开（jquery.mobile.structure-1.0.min.css）文件并
2. 将所有的white-space:nowrap替换为white-space:normal

注意：请勿更改HTML标签。

- ciwmcit

---

非常极端。这也会使升级成为一场噩梦。 - BritishDeveloper

改变库文件总是一个坏主意。我建议不要这样做！ - MataMix

另一种做法是在某些情况下可行的，即添加到所有元素中：* {white-space: normal !important;} - Robin Manoli

Answer 4

Gulp.

“JQuery Mobile ListView show text on multiple lines”

我偶然发现了这个StackOverflow问题，因为我也在想如何实现这个功能。

然而，在使用jqGrid Mobile后，我对这个问题的最佳答案是：不要这样做。

如果您有一组记录，每个记录包含多行文本，则编写自己的代码会带来更好的用户体验。

以下是我的iPhone应用程序的几个屏幕截图，以说明我的意思。

在第一个屏幕上，用户搜索公司名称时，我使用了jqGrid Mobile，以及一个文本框，用户可以在其中输入公司名称，并立即在jqGrid中查看匹配的记录。

我在此处记录了如何将此功能添加到jqGrid中：

jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

但是，在第二个网页中，我故意选择完全不使用jqGrid。 我发现复制jqGrid的CSS样式，并创建两个HTML控件：

• 一个“标题”栏，显示您正在查看的内容（在此示例中为您选择的公司名称）
• 一个可滚动的位置列表，填充其余屏幕。

是的，我知道，这意味着必须编写更多的JavaScript代码，但它在设备上看起来很棒，并且最大限度地利用了有限的屏幕空间。 请注意，在上面的屏幕中，我已经向下滚动了我的位置列表，Safari已自动隐藏了其导航栏（其中显示了Back / Next / Send to按钮）。

当然，在这个特定的例子中，它可以很好地工作，因为我知道这个屏幕上不会有太多记录（特定公司的位置）。 在这个屏幕上放弃jqGrid，我失去了用户搜索特定国家/地区位置的能力，

但是，对于这个应用程序来说，在其中一个屏幕上不使用jqGrid大大提高了可用性。

我知道这个例子没有提供任何JavaScript代码，但我希望这些屏幕截图能激发您在开发设备应用程序时超越jqGrid的思考。

- Mike Gledhill