JQuery Mobile ListView отображает текст на нескольких строках

Я работаю над представлением списка с помощью 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

Ответы

Ответ 1

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

Ответ 2

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

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

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

Ответ 3

  • open (jquery.mobile.structure-1.0.min.css) и
  • заменить все белое пространство: nowrap на белое пространство: нормальное

Ответ 4

Gulp.

"JQuery Mobile ListView отображает текст на нескольких строках"

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

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

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

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

enter image description here

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

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

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

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

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

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

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

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

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