JQuery Mobile ListView 在多行上显示文本
我正在使用 jQuery Mobile 创建列表视图，并尝试执行与此示例类似的操作： http://jquerymobile.com/demos/1.0a2/#docs/lists/lists- format.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>
谢谢！ 马可
I'm working on a list view with jQuery Mobile and I'm trying to do something similar to this sample:
http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-formatting.html
I have a title and a long description text.
The problem is that I need the text to start a new line if the screen is too small (or text to long), what happens now is that the text gets cut and added dots ...
<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>
Thanks!
Marco
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
我的方法是将
white-space:normal;添加到该部分的 CSS 中。希望有帮助。The way I did it was to add
white-space:normal;to the CSS for that section. Hope that helps.jQuery Mobile 官方论坛的 ruthc68 回答了这个问题：
希望这能为某人节省一些时间:)
ruthc68 from jQuery Mobile official forum answered the question:
Hope this will save some time to someone :)
咕噜咕噜。
“JQuery Mobile ListView 在多行上显示文本”
我偶然发现了这个 StackOverflow 问题，因为我也想知道如何做到这一点。
然而，在使用 jqGrid Mobile 之后，我对这个问题的最佳答案是：不要这样做。
如果您有一组记录，其中每个记录包含多行，那么编写自己的代码会带来更好的用户体验。
这是我的 iPhone 应用程序的几张屏幕截图，以向您展示我的意思。
在用户搜索公司名称的第一个屏幕上，我做 使用 jqGrid Mobile，以及一个文本框，用户可以在其中输入公司名称，然后立即查看 jqGrid 中的匹配记录。
我在这里记录了如何将此功能添加到 jqGrid：
jqGrid - 更改过滤器/搜索弹出表单 - 在页面上平坦 - 而不是对话框
在第二个网页上不过，我故意选择根本不使用 jqGrid。我发现复制 jqGrid 的 css 样式并创建两个 HTML 控件对用户更加友好：
是的，我知道，这意味着必须编写更多 JavaScript 代码，但它在设备上看起来很棒，并且可以充分利用有限的屏幕空间。请注意，在上面的屏幕中，我向下滚动了位置列表，并且 Safari 已自动隐藏其导航栏（显示“后退”/“下一步”/“发送到”按钮）。
当然，它在这个特定的示例中效果很好，因为我知道这个屏幕上不会有很多记录（特定公司的位置）。通过在此屏幕上放弃 jqGrid，我失去了用户搜索特定国家/地区的位置的能力，
但是，对于此应用程序，不在其中一个屏幕上使用 jqGrid 极大地提高了可用性。
我很欣赏这个示例没有呈现任何 JavaScript 代码，但我希望这些屏幕截图能够激发您在为设备开发应用程序时跳出 jqGrid 框框进行思考。
Gulp.
"JQuery Mobile ListView show text on multiple lines "
I stumbled across this StackOverflow question, as I was also wondering how to do this.
However, after playing around with jqGrid Mobile, my best answer to this question is this: don't do it.
If you have a set of records, where each record contains multiple lines, then it's a much nicer user experience to write your own code.
Here's a couple of screenshots of my iPhone app, to show you what I mean.
On the first scren, where the user searches for a Company name, I do use jqGrid Mobile, along with a textbox where the user can type in a company name and immediately see the matching records in the jqGrid.
I documented how you can add this functionality to jqGrid here:
jqGrid - Change filter/search pop up form - to be flat on page - not a dialog
On the second webpage though, I deliberately chose not to use jqGrid at all. I found it was far more user-friendly to copy jqGrid's css styling, and create two HTML controls:
Yes, I know, it means having to write more JavaScript code, but it looks fantastic on a device, and makes the most out of the limited screen space. Notice how, in the screen above, I've scrolled down my list of locations, and Safari has automatically hidden its navigation bar (where the Back/Next/Send to buttons were shown).
Of course, it works well in this particular example because I know there won't be many records on this screen (locations for a particular company). By throwing away jqGrid on this screen, I've lost the ability for the user to search for, say, locations in a particular country,
But, for this app, not using jqGrid on one of the screens greatly improved useability.
I appreciate this example doesn't present any JavaScript code, but I hope the screenshots will inspire you to think outside the jqGrid box when developing apps for devices.