Discussion :

[Jim_Nastiq]

Salut,

je souhaite avoir une liste (ul/li) qui ne contient pas de retour à la ligne en cas de texte trop long mais qui possède une largeur max.

J'ai tenté pas mal de chose ne fixant les max-width des balises ul et li, avec les propriétés white-space: nowrap mais rien y fait , soit mon texte effectue un retour à la ligne soit il est trop long et "déborde" de la zone souhaité.
Y'a t'il moyen d'avoir une sorte de gestion de la largeur d'un texte et de couper le texte si celui ci est trop long (façon "..." ) ?

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
<ul>
   <li>un texte</li>
   <li>un texte beaucoup trop long pour tenir sur une seule ligne</li>
</ul>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
ul{
   max-width:90px;
}
 
li{
   white-space: nowrap;
   max-width:90px;
}

Merci.

[vodiem]

salut Jim_Nastiq,

tu peux utiliser:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

overflow:hidden;

mais cela ne va pas te mettre de "..."
pour cela il faudrait une fonction.

[Jim_Nastiq]

Merci Vodiem,

cela fonctionne mais a pour effet de supprimer mes puces et mes effets roll-over

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
.menuList ul{
	max-width:200px;
}
.menuList li {
	font-family: Arial, sans-serif;
	font-size: 100%;
	color: #635821;
	white-space: nowrap;
	overflow:hidden;
	max-width:200px;
	list-style-type: circle;
	cursor: pointer;
	height: 15px;
} 
.menuList li:hover {
	text-decoration: underline;
}

[vodiem]

effectivement cela retire les puces... mais pas le rollover.
il faut retirer la hauteur: "height: 15px;"
pour la puce il est possible d'en rajouter une par ex en background avec un repeat-y.

sinon il est possible de faire du clipping:

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.menuList {
position:absolute;
clip:rect(0px,200px,50px,0px);
}

mais cela fixe les dimensions...

[Jim_Nastiq]

si je retire le height ok je retrouve le roll over cependant l'espacement entre chaque item de la liste est bie ntrop grande à mon gout...

pour les puces je peux utiliser le background mais j'ai un soucis avec le padding qui ne décale pas le texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
.menuList ul{
	max-width:200px;
}
.menuList li {
	font-family: Arial, sans-serif;
	font-size: 100%;
	color: #635821;
	white-space: nowrap;
	overflow:hidden;
	max-width:200px;
	list-style-type: none;
        background-image: url(images/leaf.gif);
	background-repeat: no-repeat;
	background-position: 0 0.70em;
	padding-left:15px;
        cursor:pointer;
}
.menuList li:hover {
	text-decoration: underline;
}

alors avec ce code le soucis est l'espacement entre les items et les puces qui chevauchent le texte. une idée?


EDIT: ca avance, il ne me reste plus qu'a trouver comment réduire l'espacement entre les items d'une liste autrement qu'en jouant sur le height .

[Jim_Nastiq]

C'est finalement bon, je m'en suis sorti avec un margin-top à 0.


Merci Vodiem pour ton aide