Définir l'interligne

145

Comment puis-je définir l'interligne avec CSS, comme nous pouvons le définir dans MS Word?

css line

— Lune
source

236

Essayez la propriété line-height .

Par exemple, 12px font-size et 4px distants des lignes inférieure et supérieure:

line-height: 20px; /* 4px +12px + 4px */

Ou avec des emunités

line-height: 1.7em; /* 1em = 12px in this case. 20/12 == 1.666666  */

— Mario Cesar
source

10

J'ai trouvé que j'avais également besoin display: block;que ces paramètres soient efficaces partout, pas seulement en haut et en bas de paragraphe.

— PatrickT

2

N'oubliez pas que vous ne pouvez pas définir la valeur de la propriété de hauteur de ligne sous «1» ou «100%» si vous la définissez sur un élément <a>. Si vous le souhaitez, vous pouvez définir un entre votre texte et votre <a>, par exemple.

— raulchopi

2

cela ne fonctionne pas avec span car comme mentionné par @PatrickT span n'est pas affiché: block

— walv

1

@walv, ce n'est pas supposé le faire. De plus, si vous devez l'utiliser dans un intervalle, il est préférable d'utiliser display: inline-block, au lieu de display: block.

— Mario Cesar

1

@Userthatisnotauser vous ne pouvez pas qu'une chose similaire se produise aux utilisateurs qui auront besoin d'utiliser une applet java ou une application Web qui nécessite ᴜᴅᴘ socket (en raison de la perte de ɴᴘᴀᴘɪ prise en charge et tous les navigateurs retirent le support de leur plug-in personnalisé ᴀᴘɪ) . Le ᴊᴘʟ site web dédié à la mission Cassini nécessite toujours le plugin quick time pour pouvoir visionner leur vidéo en ligne. Sans oublier que les plugins ɴᴘᴀᴘɪ vous permettent de regarder des vidéos stéréoscopiques via des écrans stéréoscopiques en streaming. Dans mon pays, deux grands fournisseurs de chaînes de télévision ont encore besoin de Silverlight et prévoient de ne pas se moderniser.

— user2284570

103

Vous pouvez également utiliser une valeur sans unité, qui est le nombre de lignes: line-height: 2;est à double interligne, line-height: 1.5;est un et demi, etc.

— MikeTheLiar
source

Cela ne fonctionne pas dans Opera basé sur Presto. J'ai besoin d'une solution de contournement ... s'il vous plaît! : \

— user2284570

@ état de l'utilisateur: fonctionne sur ma machine. Avez-vous essayé l'une des autres réponses?

— MikeTheLiar

Je veux dire que l'élément CSS est reconnu, mais n'affecte pas la sortie de rendu. Testé 12.16 et 12.50. L'autre réponse est fondamentalement la même: ILS DISENT TOUS d'utiliser l'élément de hauteur de ligne!

— user2284570

@user Parce que c'est comme ça que vous faites. J'imagine que c'est un bug de navigateur ou un manque de support pour cette règle css. Devrait probablement être posé comme une question distincte.

— MikeTheLiar

Bien sûr, demander une solution de contournement est hors sujet ici ... d'ailleurs je l'ai vu affecter d'autres marques de navigateurs: il existe lorsque le paramètre est défini avec le DOM ou lorsque contenteditable = "true" est présent.

— user2284570

12

Vous ne pouvez pas définir l'espacement inter-paragraphes dans CSS en utilisant la hauteur de ligne, l'espacement entre les blocs. Cela définit à la place l'espacement des lignes intra-paragraphe, l'espace entre les lignes dans un bloc. Autrement dit, la hauteur de ligne est l'interligne du typographe dans le paragraphe est contrôlée par la hauteur de ligne.

Je ne connais actuellement aucune méthode en CSS pour produire (par exemple) un espacement de 0,15em , que ce soit en utilisant des variantes em ou rem sur une propriété de police. Je soupçonne que cela peut être fait avec des flotteurs ou des compensations plus complexes. Dommage que cela soit nécessaire en CSS.

— Thomas Visel
source

7

Ne pourriez-vous pas utiliser des marges pour cela pour l'inter- espacement?

— Flimm

4

Dans certains cas, margin-topet / ou margin-bottompeut accomplir efficacement ce qui est souhaité ici.

— user1147171

10

Si vous voulez des lignes condensées, vous pouvez définir la même valeur pour font-sizeetline-height

Dans votre fichier CSS

.condensedlines {              
    font-size:   10pt;
    line-height: 10pt;  /* try also a bit smaller line-height */
}

Dans votre fichier HTML

<p class="condensedlines">
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
bla bla bla bla bla bla <br>
</p>

-> Jouez avec cet extrait sur jsfiddle.net

Vous pouvez également augmenter le line-heightcontrôle de l'espacement des lignes fines:

.mylinespacing {
    font-size:   10pt;
    line-height: 14pt; /* 14 = 10 + 2 above + 2 below */
}

— olibre
source

9

Essayez cette propriété

line-height:200%;

ou

line-height:17px;

utiliser l'augmentation et diminuer le volume

— ANANTH.S
source

@AVD: Cela ne fonctionne pas dans Opera basé sur Presto. J'ai besoin d'une solution de contournement ... s'il vous plaît! : \

— user2284570

4

Je ne sais pas si c'est ce que vous vouliez dire:

line-height: size;

— Alan Haggai Alavi
source

4

Essayez la line-heightpropriété; il existe de nombreuses façons d'attribuer la hauteur de ligne

— Harsha MV
source

1

Ouais, comme tout le monde le dit, line-heightc'est la chose. Toutes les polices que vous utilisez, un caractère à mi-hauteur (comme un ou ■, ne passe pas par le haut ou le bas) devrait aller avec la même hauteur de longueur à line-height: 0.6la 0.65.

<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa<br>
aaaaa
</div>
<br>
<br>

<div style="line-height: 0.6; font-family: 'Fira Code', monospace, sans-serif">
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■<br>
■■■■■■■■■■
</div>
<br>
<br>
<strong>BUT</strong>
<br>
<br>
<div style="line-height: 0.65; font-family: 'Fira Code', monospace, sans-serif">
ddd<br>
ƒƒƒ<br>
ggg
</div>

Développer l'extrait

— RubenVerg
source

0

lineSpacing est utilisé dans React Native (ou dans les applications mobiles natives).

Pour le Web, vous pouvez utiliser letterSpacing(ou letter-spacing)

— Eric Kim
source