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>

谢谢！ 马可

Answer 1

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

Answer 2

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

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

希望这会节省一些时间给某人：）

Answer 3

1. open（jquery.mobile.structure-1.0.min.css）和
2. 将所有 white-space：nowrap 替换为 white-space：normal

Answer 4

杯。

＆＃34; JQuery Mobile ListView在多行显示文本＆＃34;

我偶然发现了这个StackOverflow问题，因为我也想知道如何做到这一点。

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

如果你有一组记录，每条记录包含多行，那么编写自己的代码会有更好的用户体验。

这里有我的iPhone应用程序的几个屏幕截图，向您展示我的意思。

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

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

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

在第二个网页上，我故意选择不使用jqGrid。我发现复制jqGrid的CSS样式并创建两个HTML控件更加用户友好：

• a＆＃34;标题＆＃34;栏，显示您所看到的内容（在此示例中，您选择的公司名称）
• 可滚动的位置列表，填充屏幕的其余部分。

是的，我知道，这意味着必须编写更多的JavaScript代码，但它在设备上看起来很棒，并且可以充分利用有限的屏幕空间。请注意，在上面的屏幕中，我已经向下滚动了我的位置列表，并且Safari已自动隐藏其导航栏（显示了后退/下一个/发送到按钮的位置）。

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

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

我很欣赏这个示例并不提供任何JavaScript代码，但我希望屏幕截图能激发您在为设备开发应用时在jqGrid框外思考。