CSS word wrap avec des éléments flottants
J'ai un fixe-largeur de la barre latérale comprenant un bootstrap nav-list
où certains éléments de la liste ont aligné à droite étiquettes.
Par exemple:
<li>
<a href="#">abc_test_randomrandom</a>
<span class="pull-right label">0000</span>
</li>
Toutefois, cela ne fonctionne pas si le lien est long. Il s'agrandit pour remplir l'ensemble de la ligne, et pousse l'étiquette à la ligne suivante.
J'ai mis en place un jsFiddle démo pour illustrer ce comportement. EDIT: Et maintenant un gist trop.
Le comportement désiré est abc_test_randomrandom
et 0000
sur la même ligne, le long de la chaîne de retour à la ligne si nécessaire. Est-ce possible?
Vous devez vous connecter pour publier un commentaire.
Oui. Utiliser une largeur fixe et donner
overflow: hidden;
pour l'excédent avectext-ellipsis
.Je suis incapable d'ouvrir jsFiddle. Afin de ne pas voir la cause exacte.
Je pense que Praveen de la solution est en fait une meilleure mise en œuvre, mais pour obtenir le comportement de l'origine de la demande,
display: inline-block
,word-wrap: break-word
et le réglage de lawidth
il fixe.Dans le Bootstrap de pull à droite est essentiellement juste un wrapper pour la propriété CSS float. Vous avez besoin de mettre l'0000 durée avant la abc_test_randomrandom dans le balisage et il doit envelopper l'ancre à deux lignes que nécessaire, de sorte que votre flottante élément avant de l'élément flottant autour. Vous devrez peut-être définir une marge à droite de l'ancre à la largeur de votre flottait élément. Je ne peux pas obtenir jsFiddle pour charger maintenant, ou autre chose que je voudrais vous donner un meilleur exemple. Je vais essayer le contrôle de retour.
EDIT: j'ai été en mesure d'obtenir votre jsFiddle à charger.
Si vous déplacez les travées avant les ancres dans votre code HTML et ajouter cette CSS, cela fonctionne. Si votre texte est littéralement va avoir de soulignement à la place des espaces, alors vous aurez besoin de la word-wrap CSS que vous avez mentionné dans votre propre réponse.
L'avantage est qu'il ne nécessite pas de hacks CSS (c'est à dire pour le display: inline-block) pour travailler dans les anciennes versions d'IE, si c'est un souci pour votre projet.