web-dev-qa-db-fra.com

Comment appliquer un remplissage à chaque ligne d'un texte multiligne?

J'ai la couleur de fond appliquée à la balise <span>, il y a aussi un padding gauche et droit défini. Le problème est le suivant: la padding est appliquée uniquement à gauche (début) et à droite (fin) du <span>, pas à gauche (début) et à droite (fin) de chaque ligne lorsque le texte est entouré de plusieurs lignes.

Comment puis-je appliquer les valeurs padding gauche et droite aux lignes middle ?

h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.35em;
  margin-bottom: 40px;
  color: #fff;
}
h1 span {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0 20px;
}
<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

htmlcsscss3
29
user3550879

Vous pouvez utiliser la propriété box-decoration-break avec la valeur clone.

box-decoration-break: clone; Chaque fragment de boîte est rendu indépendamment avec la bordure, le remplissage et la marge spécifiés pour chaque fragment. Border-radius, border-image et box-shadow sont appliqués à chaque fragment indépendamment. L'arrière-plan est dessiné indépendamment dans chaque fragment, ce qui signifie qu'une image d'arrière-plan avec répétition en tâche de fond: non répétition peut être répétée plusieurs fois. - MDN

Consultez les tableaux de prise en charge actuels du navigateur sur caniuse.com

Exemple jsFiddle

h1 {
  font-weight: 800;
  font-size: 5em;
  line-height: 1.35em;
  margin-bottom: 40px;
  color: #fff;
}
h1 span { 
  background-color: rgba(0, 0, 0, 0.5); 
  padding: 0 20px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
<h1><span>The quick brown fox jumps over the lazy dog.</span></h1>

44
Stickers

Multi-line-padded-text par CSS Des astuces à la rescousse

Le HTML

<div class="padded-multiline">
  <h1>
    <strong>
      How do I add padding to subsequent lines of an inline text element?
    </strong>
  </h1>
</div>

Le CSS

.padded-multiline { 
  line-height: 1.3; 
  padding: 2px 0; 
  border-left: 20px solid #c0c;
  width: 400px;
  margin: 20px auto;
}
.padded-multiline h1 { 
  background-color: #c0c;
  padding: 4px 0;
  color: #fff; 
  display: inline;
  margin: 0; 
}
.padded-multiline h1 strong { 
  position: relative;
  left: -10px; 
}

NB: merci à astuces CSS pour cela, et tant d’autres astuces

7
stephenmurdoch

Un peu tard dans la soirée, mais vous pouvez utiliser une balise <p> au lieu d'un <span>, qui appliquera le remplissage à toutes les lignes.

1
zefram

Essayez l'instruction ci-dessous pour une ligne ou un paragraphe ou une étiquette en définissant line-height.

line-height: 1.3;
0
Narendher Reddy Yelala