jQuery mobile: Включить Word Wrap в 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

Образец li й-элемент из моего теста 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> и установить конкретное поведение, которое вы хотите, а не изменить общее поведение Jquery мобильного CSS. С этим вы можете иметь только конкретную вещь, чтобы вести себя так, как вы хотите.

Answer 3

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

Answer 4

В JQuery мобильный 1.4.4 это работало:

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