jQuery Mobile ListView indicare testo su più righe

Question

sto lavorando su una visualizzazione elenco con jQuery Mobile e sto cercando di fare qualcosa di simile a questo esempio: http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-formatting.html

Ho un titolo e una descrizione lungo testo . Il problema è che ho bisogno del testo per iniziare una nuova riga se lo schermo è troppo piccolo (o il testo a lungo), quello che succede ora è che il testo viene tagliato e puntini aggiunto ...

<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> 

Grazie ! Marco

Answer 1

Il modo in cui l'ho fatto è stato quello di aggiungere white-space:normal; al CSS per quella sezione. Spero possa aiutare.

Answer 2

ruthc68 dal forum ufficiale jQuery Mobile ha risposto alla domanda:

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

Spero che questo farà risparmiare tempo a qualcuno :)

Answer 3

1. aperta (jquery.mobile.structure-1.0.min.css) e
2. sostituire tutto white-space: nowrap da spazi bianchi: normale

Answer 4

Gulp.

"jQuery Mobile ListView indicare testo su più righe"

mi sono imbattuto in questa domanda StackOverflow, come mi è stato anche chiedendo come fare questo.

Tuttavia, dopo aver giocato con jqGrid Mobile, la mia migliore risposta a questa domanda è questa: non farlo.

Se si dispone di un set di record, in cui ogni record contiene più righe, è molto più piacevole per l'utente scrivere il proprio codice.

Ecco un paio di schermate della mia app per iPhone, per mostrarti cosa intendo.

Sulle prime scren, in cui l'utente cerca un nome di società, ho fanno uso jqGrid mobile, insieme a una casella di testo in cui l'utente può digitare un nome della società e immediatamente vedere il corrispondenti record in jqGrid.

ho documentato come è possibile aggiungere questa funzionalità per jqGrid qui:

jqGrid - Change filter/search pop up form - to be flat on page - not a dialog

Sulla seconda pagina web, però, ho deliberatamente scelto di non usare jqGrid a tutti. Ho trovato era molto più facile da usare per copiare lo stile css del jqGrid, e creare due controlli HTML:

• un bar "header", mostrare il contesto di quello che stai vedendo (il vostro prescelto nome della società, in questo esempio)
• un elenco scorrevole di posizioni, riempiendo il resto dello schermo.

Sì, lo so, significa dover scrivere altro codice JavaScript, ma è fantastico su un dispositivo e sfrutta al massimo lo spazio limitato sullo schermo. Notate come, nella schermata in alto, ho fatto scorrere il mio elenco di posizioni e Safari ha nascosto automaticamente la barra di navigazione (dove sono stati visualizzati i pulsanti Indietro/Avanti/Invia a).

Ovviamente, funziona bene in questo particolare esempio perché so che non ci saranno molti record su questo schermo (posizioni per una particolare azienda). Lasciando jqGrid su questo schermo, ho perso la possibilità per l'utente di cercare, per esempio, le posizioni in un particolare paese,

Ma, per questa app, non usare jqGrid su uno degli schermi notevolmente migliorata l'usabilità .

Apprezzo che questo esempio non presenti alcun codice JavaScript, ma spero che gli screenshot ti ispirino a pensare al di fuori della casella jqGrid durante lo sviluppo di app per dispositivi.