CSS remplacent la hauteur de la ligne sur word wrap

J'ai une liste de liens lié à une assez étroite boîte; assez étroit pour quelques liens pour envelopper.

la hauteur de la ligne est réglé sur 30px, ce qui est bien pour les non-enveloppé liens; toutefois, pour les un lien dont le texte est assez long pour forcer un wrap ligne, un 30px la hauteur de la ligne est appliquée, ce faisant apparaître comme si il y a 2 liens, et pas seulement une suite de texte de lien.

J'aimerais en quelque sorte (sans js ou sur le middleware fin calc avec la longueur de la chaîne) pour obtenir le enveloppés lien texte, d'avoir un line-height de 10px ou de donner l'impression visuelle de la poursuite et de ne pas la séparation.

InformationsquelleAutor virtualeyes | 2012-03-12
  1. 39

    Line-height est censé définir l'espacement entre les lignes (en particulier, quand ils wrap). Ce que vous êtes probablement à la recherche pour est margin sur le li objet. Si vous définissez la line-height la plus petite valeur que vous voulez lors de l'habillage lignes et de définir la margin à la valeur que vous voulez entre les éléments, vous devriez être bon d'aller.

    Voir si ce n'est ce que vous voulez:

    li {
    padding: 10px 0 0 0;
    margin: 30px 0;
    line-height: 10px;
}
    • Nice, je vais upvote que.
    • Doit obtenir plus de rep pour les cas limites des solutions de ce type, mais ne peut marquer répondu à 1X. Avait trop faible pour être juste, mais c'est "le" chemin à parcourir. Il est intéressant de noter que la hauteur de la ligne semble être totalement ignorée lorsque la marge est la plus grande valeur.
    • Merci de bien vouloir accepter! La plus petite line-height est ignorée, car margin et line-height sont "l'effondrement" des valeurs. Le line-height valeur essentiellement met une marge verticale sur chaque ligne. Lorsque deux objets avec de la marge verticale sont adjacents, la plus petite des deux marges est "effondré" à zéro, ne laissant que la valeur la plus grande. Désolé, mais je n'ai pas de lien pour les specs pour cela.
    • Voici un site qui semble expliquer l'effondrement de la marge concept assez bien: l'Effondrement des Marges
    InformationsquelleAutor TLS
  2. 5

    Je le ferais de cette façon

    li {
    list-style-position: inside;
    margin: 20px;
}

ul {
    width: 200px;
    border: solid 1px;
}

    Ou vous pouvez définir la "première ligne" pseudo-élément comme dans cet exemple

    li {
   padding: 10px 0 0 0;
    margin: 10px;
    line-height: 30px;
}
li:first-line {
    margin: 10px;
    line-height: 10px;
}
ul {
    width: 200px;
}
    • cool, mais pas de dés, ne peuvent pas obtenir par défaut enveloppé la hauteur de la ligne a changé. Dans l'idéal, l'ont enveloppé le texte s'affiche juste en dessous avec 5px espacement. Je vais continuer à tripoter...
    • Assurez-vous. Si vous voulez afficher votre code, je serai heureux de vous aider.
    • +1 ya aimerais pour la première option de ligne, mon css fu est relativement faible, de sorte pépites comme ce sont les frais à venir à travers 😉
    InformationsquelleAutor thepriebe