[CSS] enlever retour à la ligne [Résolu/Fermé]

Signaler
Messages postés
1221
Date d'inscription
jeudi 4 septembre 2008
Statut
Membre
Dernière intervention
2 janvier 2014
-
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
-
Bonjour,

je suis en train de créer un "nuage de donnée" mais j'ai un soucis graphique.
chaque entrée est dans les balises li (et donc tous entourée par ul).

Ce que j'aimerais c'est que le texte se met en justifié
text-align: justify;

ça c'est bon mais ce code ne tiens pas compte de mes donnée?
je m'explique, si une de mes données est composé de 3 mots, il est possible que le 3ème mot passe à la ligne et c'est ce que je veux éviter.

Y aurait-il une solution ?

J'ai cru en avoir une avec la propriété
white-space: nowrap;

mais alors il n'y a plus aucun retour à la ligne donc mes données sortent du cadre.

5 réponses

Bonjour,
c'est quoi un nuage de données? des données dynamiques? Quoiqu'il en soit si tu veut que des <ul></ul> ou n'importe quelle balise ne fasse pas un retour à la ligne il faut les positionner par rapport aux précédentes, avec float:left par exemple.
Un text-align s'applique au texte CONTENU dans la balise. Donc ce qui est justifié c'est pas la balise mais le texte par rapport à/dans son container(la balise).

float:left;
indique que la balise se positionne(flotte) à la gauche de celle qui la précède (si elle a la place bien sûr, sinon retour à la ligne).
Mais bon pourquoi utiliser un UL puisqu'il est fait pour faire une liste avec un saut à la ligne...je sait que pour les menus c'est souvent employé mais je reste sur mes bons vieux tableaux qui m'obligent pas à faire de la gym à mes balises et vont pas avoir un décalage différent les navigateurs.
Messages postés
1221
Date d'inscription
jeudi 4 septembre 2008
Statut
Membre
Dernière intervention
2 janvier 2014
125
merci pour vos réponses.
j'ai testé le & nbsp;, ça fonctionne mais je ne sais pas pouquoi, les liens ne sont pas mis à la ligne.
J'ai enlevé les liste en laissant uniquement les liens.

voici un exemple : http://www.blizer.net/tag.html
On voit clairement le bug.

fandecarotte -> je n'aime pas utiliser les tableaux lorsque je peux faire autrement. Pour mettre un design plus "complexe" je trouve que c'est moins pratique.
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 024
Éssayes de séparrer les liens par un espace :

<a ...></a><a ...>

devient :
<a ...></a> <a ...>
Messages postés
1221
Date d'inscription
jeudi 4 septembre 2008
Statut
Membre
Dernière intervention
2 janvier 2014
125
Ok merci :) c'était tout con.
mais je ne comprend pas pourquoi il n'y avait pas de retour à la ligne sans l'espace entre les <a>.
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 024
ouais, c'est étrange... mais bon, si ça marche :)
Messages postés
4963
Date d'inscription
samedi 8 mars 2008
Statut
Membre
Dernière intervention
31 octobre 2019
1 024
Salut !

Il faut utiliser les espaces insécables.

Par exemple, au lieu de

"comment ça marche"
tu fera :
comment[espace insécable]ca[espace insécable]marche.

Un espace insécable sert justement à ça.

Pour l'utiliser, on utiliser l'entité HTML correspondant :

& nbsp; (il ne faut pas d'espace entre le "&" et le "nbsp;"