Placer du texte dans les éléments de la liste/les boutons au lieu de la masquer le dépassement de

Je suis en train de remplacer le comportement par défaut des éléments de la liste et les boutons de jQuery Mobile, qui contient du texte qui ne tient pas sur une ligne cachée à débordement.

Si vous affichez ce sur un skinny fenêtre de navigateur ou iPhone, vous verrez ce que je veux dire: http://m.gizmag.com

Je voudrais être en mesure de le texte à la ligne dans le h3 et les balises p de chaque élément de la liste sur de nouvelles lignes.

Merci d'avance!

InformationsquelleAutor Tim | 2010-12-01
  1. 69

    Essayez de définir un style de white-space:normal pour les éléments.

    J'ai juste fait ce avec une ancre (<a>) de l'élément à l'intérieur d'un jQuery Mobile listview style li, et il a travaillé pour le texte à la ligne que je m'attendais. J'ai utilisé Chrome developer tools afin de déterminer où les attributs CSS ont été en provenance et de manière interactive changé pour le faire fonctionner comme je le voulais.

    --
    Derek

    • C'est une bonne idée de s'en sortir. Il serait bien de créer une classe CSS qui pourrait le faire. J'ai aussi pensé à l'aide du rectangle de comportement.
    • Je ne sais pas pourquoi vous n'obtenez pas cette question. "white-space: normal" travaillé parfait pour moi.
    • doux merci ça a marché parfaitement
    • Il a travaillé pour moi aussi! 🙂
    • JQuery Mobile réécrit l'élément de la liste à avoir un contenant <div class="ui-btn-texte"> donc, ce style sélecteur de marche: div.ui-btn-texte { white-space:normal; }
    • car c'était pour une liste, cela à fonctionné pour moi: .ui-li-desc { white-space: normal; !important}
    • J'ai essayé et ça a fonctionné, mais maintenant sur ma barre de navigation qui dispose de trois boutons, deux d'entre eux le texte à la ligne (résultant en un plus grand boutons) et on n'a pas, donc je suis de différentes hauteurs: i.imgur.com/kpwesC5.png comment puis-je résoudre ce problème?

    InformationsquelleAutor Derek Kalweit
  2. 7

    Si possible, pour l'enfermer à l'intérieur d'un <div> permettra également de les emballer. (Mais la recherche de l'élément affecté et de la déclaration de white-space:normal est plus la bonne solution)

    Source: http://forum.jquery.com/topic/list-items-are-truncating-text-is-there-a-way-around-this

    InformationsquelleAutor enkash