CSS를 사용하여 줄 바꿈된 텍스트의 채우기 효과 얻기

Question

여기에 최소한의 예가 있습니다: https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ

다음 내용이 포함되어 있습니다:

.wrapper {
  너비: 200px;
}

h1 {
  글꼴 크기: 32px;
  글꼴 모음: Tahoma, Helvetica, sans-serif;
  줄 높이: 50px;
}

.헤더 텍스트 {
  배경: #aabbcc;
  왼쪽 패딩: 20px;
  오른쪽 패딩: 20px;
  테두리 반경: 6px;
}

  

    
           긴 텍스트 줄 바꿈
         
  

Answer 1

.header-text의 표시 속성을 block 또는 inline-block으로 변경해야 합니다

Answer 2

원하는 것은 box-decoration-break来实现，而且它甚至可以与border-radius:

을 사용하여 함께 사용할 수 있습니다.

으아악 으아악