Comment éviter la modification de l'interlignage ?

**Mister Paul** · 04/12/2012, 18h38

Bonjour,

je cherche à insérer un picto (le caractère d'une police, pas une image) en bout de ligne texte.
Evidemment comme je suis une truffe en css ça me modifie l'interlignage de toute la dernière ligne...
J'aimerais éviter mais je ne sais pas comment.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
.more { 
	font-family: 'EntypoRegular';
	position: relative;
	font-size: 2em;
	padding-left: 2px;
}

J'ai bien essayé un line-height: inherit;
mais ça n'a rien fait de mieux.

Un petit coup de pouce ?

**Muchos** · 05/12/2012, 00h51

Selon moi, vous pourriez jouer avec le vertical-align du picto, selon la line-height du paragraphe. Ex:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>picto sans modification interligne</title>
	<style type="text/css">
p {
        padding: 2em 10%;
        text-align: justify;
}
/* Aucun line-height pour .lineheight0 */
.lineheight2 { line-height: 2em; }
p::after {
        content: "\2771"; /* Le picto en fin de paragraphe */
        font-size: 2em;
}
.lineheight0::after { vertical-align: text-top; }
.lineheight2::after { vertical-align: middle; }
        </style>
</head>
<body>
	<p class="lineheight0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.</p>
 
	<p class="lineheight2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.</p>
</body>
</html>

**Mister Paul** · 05/12/2012, 01h08

Merci de consacrer du temps à mon petit souci...

J'ai peur qu'en mettant du cas par cas avec le line-height on se retrouve rapidement ingérable (pour gérer tous les cas de figures)...

Je ne sais pas si c'est possible, mais je trouverais plutôt pas mal de demander à ce que l'interlignage ne soit pas modifié malgré l'insertion de ce caractère.
J'ai essayé le ligne-height: inherit; mais ça n'a pas fonctionné.
Une astuce ?

**Muchos** · 05/12/2012, 16h23

Il n'y a pas à faire de cas par cas si vos paragraphes ont tous le même interlignage ; ce qui semble être le cas avec votre modèle.

Au demeurant, votre picto est déjà affecté par la line-height du paragraphe. Donc, il faudrait lui donner une line-height de 0 : ça règlerait aussi votre problème.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>picto sans modification de la line-height</title>
	<style type="text/css">
p {
        padding: 2em 10%;
        text-align: justify;
}
/* Aucun line-height pour .lineheight0 */
.lineheight2 { line-height: 2em; }
p::after {
        content: "\2771"; /* Le picto en fin de paragraphe */
        font-size: 2em;
        line-height: 0; /* pas de line-height pour le picto */
}
        </style>
</head>
<body>
	<p class="lineheight0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.</p>
 
	<p class="lineheight2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem.</p>
</body>
</html>

**Mister Paul** · 05/12/2012, 18h03

Mais oui : line-height: 0;
Merci !

Comment éviter la modification de l'interlignage ?

CSS

Discussions similaires

Partager

Partager