jQuery mobile: Włącz zawijanie słów w ListViews

Question

Mam listview (patrz zdjęcie poniżej), które chciałbym zawijać całą treść, zamiast dodawać ... do długich linii.

Jak to zrobić?

Answer 1

Wystarczy zaktualizować CSS dla elementu .ui-li-desc który przechowuje tekst w list-item:

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

Oto demo: http://jsfiddle.net/Xc6PJ/

Niektóre dobra dokumentacja dla white-space: https://developer.mozilla.org/en/CSS/white-space

Oto przykładowy li st-artykuł z mojego testu listview po jQuery Mobile zainicjowany go:

<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

Moja sugestia byłoby użyć Div w <li> i ustawić specyficzne zachowanie chcesz zamiast zmianie ogólnej zachowanie jQuery komórkowego css. Dzięki temu możesz mieć tylko określone rzeczy, które zachowują się tak, jak chcesz.

Answer 3

Wewnątrz sekcji li dodaj sekcję div z style="white-space:normal;", która wymusza zawijanie wierszy.

Answer 4

w jQuery 1.4.4 mobilnej to działało:

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