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

Answer 1

Я сделал так, чтобы добавить white-space:normal; в CSS для этого раздела. Надеюсь, это поможет.

Answer 2

ruthc68 с официального форума jQuery Mobile ответил на вопрос:

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

Надеюсь, это сэкономит кому-то время:)

Answer 3

1. открыто (jquery.mobile.structure-1.0.min.css) и
2. заменить все пробел: nowrap на пробел: обычный

Answer 4

Глоток.

«JQuery Mobile ListView отображать текст в несколько строк» ​​

Я наткнулся на этот вопрос StackOverflow, так как мне также было интересно, как это сделать.

Однако, после игры с jqGrid Mobile, мой лучший ответ на этот вопрос: не делайте этого.

Если у вас есть набор записей, в которых каждая запись содержит несколько строк, то для пользователя гораздо удобнее написать собственный код.

Вот пара скриншотов моего приложения для iPhone, чтобы показать вам, что я имею в виду.

На первом экране, где пользователь ищет название компании, я делаю , использую jqGrid Mobile вместе с текстовым полем, в котором пользователь может ввести название компании и немедленно посмотрите соответствующие записи в jqGrid.

Я задокументировал, как вы можете добавить эту функцию в jqGrid здесь:

jqGrid - Изменить всплывающую форму фильтра / поиска - чтобы она была плоской на странице, а не диалогом

На второй веб-странице я сознательно решил вообще не использовать jqGrid. Я обнаружил, что было гораздо удобнее копировать стили CSS jqGrid и создавать два HTML-элемента управления:

• панель заголовка, показывает контекст того, что вы видите (в данном примере выбранное вами название компании)
• прокручиваемый список мест, заполняющий остальную часть экрана.

Да, я знаю, это означает необходимость писать больше кода JavaScript, но это выглядит фантастически на устройстве и максимально эффективно использует ограниченное пространство экрана. Обратите внимание, как на приведенном выше экране я прокрутил свой список местоположений, и Safari автоматически скрыл панель навигации (где были показаны кнопки «Назад», «Далее» / «Отправить»).

Конечно, это хорошо работает в этом конкретном примере, потому что я знаю, что на этом экране не будет много записей (местоположений для конкретной компании). Выбросив jqGrid на этом экране, я потерял возможность пользователю искать, скажем, местоположения в определенной стране,

Но для этого приложения отсутствие использования jqGrid на одном из экранов значительно улучшило удобство использования.

Я ценю, что этот пример не содержит никакого кода JavaScript, но я надеюсь, что скриншоты вдохновят вас на размышления над окном jqGrid при разработке приложений для устройств.