interligne sur toute la page Web

-1

J'aimerais avoir plus d'espace entre les lignes sur ma page Web. J'ai essayé d'appliquer « line-height » en CSS pour essayer de créer plus d'espace, mais je me suis aperçu qu'il ne fonctionne pas:interligne sur toute la page Web

https://gyazo.com/63c28f6ce59b8a5e17cf3d9835effa9e

Sur l'image que j'ai un morceau de texte à l'intérieur d'un div, p ou span. Si le texte devient trop long, il finira par se retrouver sur plusieurs lignes. Lorsque cela se produit, j'aimerais qu'il y ait plus d'espace entre les lignes.

Comment est-ce que je peux faire ceci?

Source

2017-01-04 Vanquiza

Il suffit d'ajouter la ligne 'attribut line-height' à votre' body' tag? Si cela ne fonctionne pas, vous utilisez peut-être un framework css ou des fichiers css tiers qui le remplacent. Mais sans code, nous ne pouvons pas vraiment vous aider. – Paul

pour des questions comme celles-ci, je suggère de reproduire le problème/extrait de code sur un service public comme jsfiddle.net et le poster ici afin que nous puissions avoir une meilleure idée de ce que vous avez essayé et comment vous pouvez l'améliorer. –

Ceci est fait précisément avec la propriété CSS line-height.

Si vous voulez la même line-height sur votre site Web entier, vous pouvez simplement l'appliquer sur votre élément body comme ceci:

body { 
    line-height: 1.5; // a numerical value, or 
    line-height: 25px; // a pixel value, for example 
}

Vous pouvez cibler également des balises ou des classes spécifiques:

// applies to all <p> elements 
p { 
    line-height: 1.3em; 
} 

// applies only to elements with the .my_paragraph class 
.my_paragraph { 
    line-height: 20px; 
}

Vous pouvez en savoir plus sur les valeurs que vous pouvez utiliser et le comportement de line-height sur the MDN specification page.

Source

2017-01-04 09:42:22

De http://www.w3schools.com/cssref/pr_dim_line-height.asp est l'exemple suivant

<!DOCTYPE html> 
<html> 
<head> 
<style> 
p.small { 
    line-height: 70%; 
} 

p.big { 
    line-height: 200%; 
} 
</style> 
</head> 
<body> 

<p> 
This is a paragraph with a standard line-height.<br> 
This is a paragraph with a standard line-height.<br> 
The default line height in most browsers is about 110% to 120%.<br> 
</p> 

<p class="small"> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
This is a paragraph with a smaller line-height.<br> 
</p> 

<p class="big"> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
This is a paragraph with a bigger line-height.<br> 
</p> 

</body> 
</html>

Source

2017-01-04 09:43:17 baliman

Utiliser l'attribut line-height dans votre balise body comme l'exemple ci-dessus:

body { 
 
    line-height:2em; 
 
}

<body> 
 
    <h1>This is just a title</h1> 
 
    <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
 
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div> 
 
</body>

Si cela ne le font pas travail, il peut être à cause d'un autre fichier CSS (par exemple à partir de votre cadre CSS si vous en utilisez un) écrase l'attribut. Essayez donc d'ajouter la balise !important à votre attribut line-height.

Source

2017-01-04 09:43:49 Paul

Vous pouvez ajouter ce qui suit pour vous assurer que la ligne de hauteur applique globalement sur l'ensemble du site:

p { 
    line-height: 24px; 
}

ou:

body, 
p { 
    line-height: 24px; 
}

Source

2017-01-04 09:48:23

interligne sur toute la page Web

Répondre

Questions connexes