JQuery Mobile ListView 在多行上显示文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7907155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery Mobile ListView show text on multiple lines
提问by Marco Matarazzi
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
我正在使用 jQuery Mobile 处理列表视图，并且正在尝试执行类似于此示例的操作：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
谢谢！马可
回答by Jordan Gagne
The way I did it was to add white-space:normal;to the CSS for that section. Hope that helps.
我这样做的方法是添加white-space:normal;到该部分的 CSS。希望有帮助。
回答by Marco Matarazzi
ruthc68 from jQuery Mobile official forum answered the question:
来自 jQuery Mobile 官方论坛的 ruthc68 回答了这个问题：
<font style="white-space:normal; font-size: small" >
Hope this will save some time to someone :)
希望这会为某人节省一些时间:)
回答by ciwmcit
- open (jquery.mobile.structure-1.0.min.css) and
- replace all white-space:nowrapby white-space: normal
- 打开 (jquery.mobile.structure-1.0.min.css) 和
- 更换所有空白：NOWRAP由白色空间：正常
回答by Mike Gledhill
Gulp.
吞咽。
"JQuery Mobile ListView show text on multiple lines "
“JQuery Mobile ListView 在多行上显示文本”
I stumbled across this StackOverflow question, as I was also wondering how to do this.
我偶然发现了这个 StackOverflow 问题，因为我也想知道如何做到这一点。
However, after playing around with jqGrid Mobile, my best answer to this question is this: don't do it.
但是，在玩弄 jqGrid Mobile 之后，我对这个问题的最佳答案是：不要这样做。
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.
这是我的 iPhone 应用程序的几个屏幕截图，向您展示我的意思。
On the first scren, where the user searches for a Company name, I douse jqGrid Mobile, along with a textbox where the user can type in a company name and immediatelysee the matching records in the jqGrid.
在第一scren，当用户搜索一个公司名称，我做使用jqGrid的手机，一个文本框，用户可以在一个公司名称类型，并沿着立即看到jqGrid的匹配记录。
I documented how you can add this functionality to jqGrid here:
我在这里记录了如何将此功能添加到 jqGrid：
jqGrid - Change filter/search pop up form - to be flat on page - not a dialog
jqGrid - 更改过滤器/搜索弹出表单 - 在页面上平坦 - 不是对话框
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:
不过，在第二个网页上，我故意选择根本不使用 jqGrid。我发现复制 jqGrid 的 css 样式并创建两个 HTML 控件对用户更加友好：
- a "header" bar, show the context of what you're seeing (your chosen Company Name, in this example)
- a scrollable list of locations, filling the rest of the screen.
- “标题”栏，显示您所看到内容的上下文（在本例中为您选择的公司名称）
- 可滚动的位置列表，填充屏幕的其余部分。
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).
是的，我知道，这意味着必须编写更多的 JavaScript 代码，但它在设备上看起来很棒，并且可以充分利用有限的屏幕空间。请注意，在上面的屏幕中，我如何向下滚动位置列表，而 Safari 已自动隐藏其导航栏（显示后退/下一步/发送到按钮的位置）。
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,
当然，它在这个特定示例中运行良好，因为我知道此屏幕上不会有很多记录（特定公司的位置）。通过在此屏幕上丢弃 jqGrid，我失去了用户搜索特定国家/地区位置的能力，
But, for this app, not using jqGrid on one of the screens greatly improved useability.
但是，对于这个应用程序，不在其中一个屏幕上使用 jqGrid 大大提高了可用性。
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.
我很感激这个例子没有展示任何 JavaScript 代码，但我希望截图能激发你在为设备开发应用程序时跳出 jqGrid 框框思考。
