jQuery mobile: включить перенос слов в ListViews

Question

У меня есть просмотр списка (см. Фото ниже), который я хотел бы обернуть в слова все содержимое вместо добавления ... к длинным строкам.

Как это сделать?

Answer 1

Вам просто нужно обновить CSS для элемента .ui-li-desc, который содержит текст в вашем элементе списка:

​.ui-page .ui-content .ui-listview .ui-li-desc {
    white-space : normal;
}​

Вот демоверсия: http://jsfiddle.net/Xc6PJ/

Хорошая документация для white-space: https://developer.mozilla.org/en/CSS/white-space

Вот пример списка элементов из моего теста listview после его инициализации jQuery Mobile:

<li class="ui-li ui-li-static ui-body-c">
    <h3 class="ui-li-heading">Sample Title</h3>
    <p class="ui-li-desc">
        Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content Sample Content
    </p>
</li>

Answer 2

Я бы предложил использовать Div внутри <li> и установить желаемое поведение, а не изменять общее поведение jssery mobile css.При этом вы можете вести себя так, как вам хочется.

Answer 3

В jQuery mobile 1.4.4 это сработало:

.ui-listview > li p {
  white-space: normal;
}

Answer 4

Внутри секции li добавьте секцию div с style="white-space:normal;", которая вызывает перенос слов.