Menggunakan CSS untuk mencapai kesan pengisian teks yang dibalut baris

Question

Saya mempunyai contoh minimalis di sini: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ

Mengandungi yang berikut:

.wrapper {
  lebar: 200px;
}

h1 {
  saiz fon: 32px;
  font-family: Tahoma, Helvetica, sans-serif;
  ketinggian garis: 50px;
}

.header-text {
  latar belakang: #aabbcc;
  padding-left: 20px;
  padding-kanan: 20px;
  jejari sempadan: 6px;
}

<div class='wrapper'>
  <h1>
    <span class='header-text'>
           Balut teks panjang
         </span>
  </h1>
</div>

Pelapik mendatar hanya berfungsi pada permulaan dan penghujung pembalut teks, tetapi saya mahu ia berfungsi pada setiap baris. Saya boleh menerima bahawa jejari sempadan tidak berada di titik putus setiap baris, tetapi saya memerlukan padding untuk digunakan.

Jika saya menambah padding-top dalam kelas .header-text, ia terpakai pada kedua-dua baris, jadi saya tidak pasti mengapa pilihan padding mendatar diabaikan apabila baris terputus.

Adakah terdapat cara untuk mencapai kesan ini dalam CSS?

Answer 1

Anda harus menukar atribut paparan .header-text kepada block atau inline-block

Answer 2

Apa yang anda mahu boleh digunakan bersama dengan menggunakan 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>