Enlaces con jQuery Mobile hace que no se muestre el texto completo...

[aitornillo]

Estoy haciendo una web adaptada a móviles con jQuery, en la pagina principal aparece una lista con frases célebres:

<ul data-role="listview">

<li><a> frase 1 </a></li>
<li><a> frase 2 </a></li>
<li><a> frase 3 </a></li>
<li><a> frase 4 </a></li>
<li><a> frase 5 </a></li>
<li><a> frase 6 </a></li>
</ul>

Como veis, cada <li> es un enlace, todo funciona estupendo si no fuese porque al colocar el enlace, la frase se corta en la pantalla. Por ejemplo, para la frase "Me llamo blablabla y soy balblabla etc etc blablabla", aparece como "Me llamo blabla y ...", o sea no se ve completo. Si quito los enlaces y dejo simplemente los <li> Frase </li>, se forman automáticamente saltos de linea en la pantalla del teléfono de forma que se puede ver la frase completa.

Cómo puedo arreglar eso?

[PHPeros]

Con CSS:

Código CSS:

li a{
white-space: normal;
overflow: visible;
}
 

Saludos