Utilisez CSS pour obtenir l'effet de remplissage du texte renvoyé à la ligne

Question

J'ai un exemple minimaliste ici : https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ

Contient les éléments suivants :

.wrapper {
  largeur : 200 px ;
}

h1 {
  taille de police : 32 px ;
  famille de polices : Tahoma, Helvetica, sans-serif ;
  hauteur de ligne : 50 px ;
}

.en-tête {
  arrière-plan : #aabbcc ;
  remplissage à gauche : 20 px ;
  remplissage à droite : 20 px ;
  rayon de bordure : 6 px ;
}</pré>
<pre class="brush:html;toolbar:false;"><div class='wrapper'>
  <h1>
    <span class='header-text'>
           Envelopper le texte long
         </envergure>
  </h1>
</div>

Le remplissage horizontal s'applique uniquement au début et à la fin du retour à la ligne du texte, mais je souhaite qu'il s'applique à chaque ligne. Je peux accepter que le rayon de bordure ne soit pas au point de rupture de chaque ligne, mais j'ai besoin d'appliquer un remplissage.

Si j'ajoute padding-top dans la classe .header-text, cela s'applique aux deux lignes, donc je ne sais pas pourquoi l'option de remplissage horizontal est ignorée là où les sauts de ligne.

Existe-t-il un moyen d'obtenir cet effet en CSS ?

Answer 1

Vous devez modifier l'attribut d'affichage de .header-text en block ou inline-block

Answer 2

Ce que vous voulez peut être utilisé ensemble en utilisant box-decoration-break来实现，而且它甚至可以与border-radius :

.wrapper {
  width: 200px;
}

h1 {
  font-size: 32px;
  font-family: Tahoma, Helvetica, sans-serif;
  line-height: 50px;
}

.header-text {
  background: #aabbcc;
  padding-left: 20px;
  padding-right: 20px;
  border-radius: 6px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           长文本换行
         </span>
  </h1>
</div>