web-dev-qa-db-fra.com

CSS remplacer la hauteur de ligne sur le retour à la ligne Word

J'ai une liste de liens liés à une boîte assez étroite; assez étroit pour que certains liens s'enroulent.

la hauteur de ligne est fixée à 30 pixels, ce qui est bien pour les liens non encapsulés; cependant, pour un lien dont le texte est suffisamment long pour forcer un retour à la ligne, une hauteur de ligne de 30 pixels y est également appliquée, ce qui donne l'impression qu'il y a 2 liens et pas seulement une continuation du texte du lien.

J'aimerais en quelque sorte (sans js ou à la fin de la longueur de chaîne calc'ing du middleware) obtenir que le texte du lien enveloppé ait une hauteur de ligne de 10px environ pour donner une impression visuelle de continuation et non de séparation.

overridingword-wrapcss
27
virtualeyes

Line-height est censé définir l'espacement entre les lignes (en particulier, quand elles s'habillent). Ce que vous cherchez probablement, c'est margin sur l'objet li. Si vous définissez le line-height à la plus petite valeur que vous souhaitez lorsque les lignes se terminent et définissez margin à la valeur que vous souhaitez entre les éléments, vous devriez être prêt à partir.

Voyez si cela fait ce que vous voulez:

li {
    padding: 10px 0 0 0;
    margin: 30px 0;
    line-height: 10px;
}
40
TLS

Je le ferais de cette façon

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

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

La

Ou vous pouvez définir le pseudo-élément "de première ligne" 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;
}
5
thepriebe