"word-wrap" un LI dans un UL

Je voudrais emballer du texte sur la ligne suivante que j'ai tenue dans un LI - l'emballage doit être fait dynamiquement donc je regarde vers CSS"word-wrap" un LI dans un UL

Je veux qu'il ressemble quelque chose comme ceci:

<ul> 
    <li> normal sized </li> 
    <li> big massive long one that i'd like to wrap to the next line like below </li> 
    <li> the result that 
      i'd like to see </li> 
</ul>

Je ne veux pas de barres de défilement, et je ne veux pas qu'il aille hors de la page, et le réglage de la largeur de l'une ou l'autre UL ou LI en CSS ne semble pas le faire pour moi. Des idées? Je suis sûr que ce quelque chose de trivial je manque

Merci

Edit: J'ai essayé ces solutions sans chance - par eux-mêmes, ils fonctionnent très bien. Je dois donc conclure que le problème se situe quelque part dans le code jQuery que j'utilise. (en utilisant un plugin appelé jqueryFileTree). Le code tire un nom de fichier, donc il y a probablement un problème avec la rupture de ligne

Source

2009-04-03 Ciaran

Pourriez-vous donner un peu plus de contexte sur ce que vous vivez? Les navigateurs, peut-être un peu plus de code? –

Voulez-vous dire aussi avoir ce retrait? Cela va être essentiellement impossible/pas x-browser/nécessite JS ou une majoration supplémentaire si c'est le cas. – annakata

La définition de la largeur sur l'élément ul devrait faire l'affaire. Je l'ai essayé avec votre exemple de base, et cela fonctionne en FF3, IE 5.5-8.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
    <head> 
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
     <title>test</title> 
     <style type="text/css" media="screen"> 
      ul { 
       width: 80px; 
      } 
     </style> 
    </head> 
    <body> 
     <ul> 
      <li> normal sized </li> 
      <li> big massive long one that i'd like to wrap to the next line like below </li> 
      <li> the result that i'd like to see </li> 
     </ul> 
    </body> 
</html>

Source

2009-04-03 13:46:23

Le texte sera enveloppé par lui-même sans CSS appliquée à tous quand il atteint la fin de la fenêtre (« zone d'affichage » dans le navigateur) ou à la fin de ses éléments spécifiés largeur. Cela s'applique à tous les éléments tant qu'ils ne sont pas positionnés à l'extérieur de la fenêtre.

Je dois dire que j'aimerais savoir comment vous avez fait que le texte dépasse la fenêtre ou la largeur d'UL/LI.

Source

2009-04-03 13:46:37

Comment définissez-vous la largeur de l'élément?

Ce qui suit ne fonctionnera pas:

<ul width="100"> 
    <li>Normal Sized</li> 
    <li>Big massive long one that I'd like to wrap to the next line</li> 
    <li>The result I'd like to see</li> 
</ul>

Vous devez définir une largeur soit en CSS ou dans la propriété de style sur l'étiquette:

<ul style="width: 100px;"> 
    <li>Normal Sized</li> 
    <li>Big massive long one that I'd like to wrap to the next line</li> 
    <li>The result I'd like to see</li> 
</ul>

ou vous pouvez créer une classe css plutôt que de définir la largeur pour chaque ul sur la page:

<style type="text/css" media="screen"> 
    .smallList { 
     width: 100px; 
    } 
</style> 

<ul class="smallList"> 
    <li>Normal Sized</li> 
    <li>Big massive long one that I'd like to wrap to the next line</li> 
    <li>The result I'd like to see</li> 
</ul>

Source

2009-04-03 13:49:34

Je suis sûr que vous vouliez dire .smallList plutôt que #smallList dans votre style. – Traingamer

"word-wrap" un LI dans un UL

Répondre

Questions connexes