Verwenden von CSS, um den Fülleffekt von zeilenumbrochenem Text zu erzielen

Question

Ich habe hier ein minimalistisches Beispiel: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ

Enthält Folgendes:

.wrapper {
  Breite: 200px;
}

h1 {
  Schriftgröße: 32px;
  Schriftfamilie: Tahoma, Helvetica, serifenlos;
  Zeilenhöhe: 50px;
}

.Überschrift {
  Hintergrund: #aabbcc;
  padding-left: 20px;
  padding-right: 20px;
  Randradius: 6px;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           Langtext umbrechen
         </span>
  </h1>
</div>

Der horizontale Abstand gilt nur für den Anfang und das Ende des Textumbruchs, ich möchte jedoch, dass er für jede Zeile gilt. Ich kann akzeptieren, dass der Randradius nicht am Bruchpunkt jeder Linie liegt, aber ich muss eine Polsterung anwenden.

Wenn ich padding-top in der Klasse .header-text hinzufüge, gilt dies für beide Zeilen, daher bin ich mir nicht sicher, warum die horizontale Padding-Option an den Zeilenumbrüchen ignoriert wird.

Gibt es eine Möglichkeit, diesen Effekt in CSS zu erzielen?

Answer 1

你应该将.header-text的display属性更改为block或inline-block

Answer 2

你想要的可以通过使用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>