Ajouter un séparateur de tuyau après les éléments d'une liste non ordonnée, sauf si cet élément est le dernier d'une ligne

Question

Est-il possible de dénommer ce html ...

 <ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>
 

... comme ça ...

... sans ajouter de classes à des éléments de liste spécifiques, ni recourir à javascript? Et si oui comment?

Answer 1

Juste

li + li::before {
    content: " | ";
}

Bien sûr, cela ne fait pas de résoudre le cas des OP problème. Il veut éluder les barres verticales en début et en fin de lignes en fonction de l'endroit où ils sont cassés. Je vais aller sur une branche et d'affirmer que ce problème n'est pas soluble à l'aide de CSS, et même pas avec JS, sauf si l'on veut essentiellement réécrire le navigateur du moteur de texte-mesure/modèle/de coupure de ligne logique.

Les seuls morceaux de CSS, aussi loin que je peux voir, que de "savoir" à propos de la ligne de rupture sont, en premier lieu, l' ::first-line pseudo élément, qui ne nous aide pas ici, en tout cas, elle est limitée à quelques éléments de présentation des attributs, et ne fonctionne pas avec des choses comme ::before et ::after. Le seul autre aspect de CSS je pense que dans une certaine mesure, expose de saut de ligne est de césure. Cependant, hyphenating est tout au sujet de l'ajout d' un personnage (généralement un tiret) à la fin des lignes, dans certaines situations, alors qu'ici nous sommes préoccupés par la suppression d'un caractère (la ligne verticale), donc je ne peux pas voir comment appliquer tout type de césure-logique, même avec l'aide de propriétés telles que l' hyphenate-character.

Nous avons l' word-spacing de la propriété, qui est appliqué intra-ligne, mais pas à la ligne début et la fin, qui semble prometteur, mais il définit la largeur de l'espace entre les mots, pas le personnage(s) à être utilisé.

On se demande si il y a une certaine façon d'utiliser le text-overflow de la propriété, ce qui est moins connu, la capacité à prendre deux valeurs pour l'affichage de texte qui déborde à gauche et à droite, comme dans

text-overflow: '' '';

mais il y a toujours n'a pas l'air d'être évident pour aller de A à B ici.

Answer 2

Avant d'afficher le code, il convient de mentionner qu'IE8 prend en charge le premier enfant mais pas le dernier, de sorte que dans une situation similaire, vous êtes prêt à utiliser la pseudo-classe: premier-enfant.

HTML:

 <ul id="menu">
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>More animals</li>
</ul>
 

CSS:

 #menu{
    list-style: none;
}
#menu li{
    display: inline;
    padding: 0 10px;
    border-left: solid 1px black;
}
#menu li:first-child{
    border-left: none;
}
 

Aperçu: http://jsfiddle.net/qdqfD/

Answer 3

Utilisez le pseudo sélecteur :after . Rechercher http://jsfiddle.net/A52T8/1/

 <ul>
    <li>Dogs</li>
    <li>Cats</li>
    <li>Lions</li>
    <li>Tigers</li>
    <li>Zebras</li>
    <li>Giraffes</li>
    <li>Bears</li>
    <li>Hippopotamuses</li>
    <li>Antelopes</li>
    <li>Unicorns</li>
    <li>Seagulls</li>
</ul>

ul li { float: left; }
ul li:after { content: "|"; padding: 0 .5em; }
 

MODIFIER:

Solution jQuery:

html:

 <div>
    <ul id="animals">
        <li>Dogs</li>
        <li>Cats</li>
        <li>Lions</li>
        <li>Tigers</li>
        <li>Zebras</li>
        <li>Giraffes</li>
        <li>Bears</li>
        <li>Hippopotamuses</li>
        <li>Antelopes</li>
        <li>Unicorns</li>
        <li>Seagulls</li>
        <li>Monkey</li>
        <li>Hedgehog</li>
        <li>Chicken</li>
        <li>Rabbit</li>
        <li>Gorilla</li>
    </ul>
</div>
 

css:

 div { width: 300px; }
ul li { float: left; border-right: 1px solid black; padding: 0 .5em; }
ul li:last-child { border: 0; }
 

jQuery

 var maxWidth = 300, // Your div max-width
    totalWidth = 0;
$('#animals li').each(function(){
    var currentWidth = $(this).outerWidth(),
        nextWidth = $(this).next().outerWidth();
    totalWidth += currentWidth;
    if ( (totalWidth + nextWidth) > maxWidth ) {
        $(this).css('border', 'none');
        totalWidth = 0;
    }
});
 

Jetez un coup d'oeil ici. J'ai aussi ajouté quelques animaux supplémentaires. http://jsfiddle.net/A52T8/10/

Answer 4

Je sais que je suis un peu en retard pour la fête, mais si vous pouvez supporter les lignes justifiées à gauche, un hack consiste à placer les tuyaux avant les éléments, puis à placer un masque sur le bord gauche, comme suit:

 li::before {
  content: " | ";
  white-space: nowrap;
}

ul, li {
  display: inline;
}

.mask {
  width:4px;
  position: absolute;
  top:8px; //position as needed
}
 

exemple plus complet: http://jsbin.com/hoyaduxi/1/edit

Answer 5

Une solution consiste à styler le bord gauche de la manière suivante:

 li { display: inline; }
li + li {
  border-left: 1px solid;
  margin-left:.5em;
  padding-left:.5em;
}
 

Toutefois, cela ne vous donnera peut-être pas les résultats escomptés si l'ensemble de la liste est bouclé, comme dans votre exemple. Cela donnerait quelque chose comme:

 foo | bar | baz
 | bob | bill
 | judy