CSS를 사용하여 줄 바꿈된 텍스트의 채우기 효과 얻기
<p>여기에 최소한의 예가 있습니다: <a href="https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ">https://codepen.io/cpcpcpcpcpx/pen/VwZWoyJ</ a> </p>
<p>다음 내용이 포함되어 있습니다: </p>
<p>
<pre class="brush:css;toolbar:false;">.wrapper {
너비: 200px;
}
h1 {
글꼴 크기: 32px;
글꼴 모음: Tahoma, Helvetica, sans-serif;
줄 높이: 50px;
}
.헤더 텍스트 {
배경: #aabbcc;
왼쪽 패딩: 20px;
오른쪽 패딩: 20px;
테두리 반경: 6px;
}</pre>
<pre class="brush:html;toolbar:false;"><div class='wrapper'>
<h1>
<span class='header-text'>
긴 텍스트 줄 바꿈
</스팬>
</h1>
</p>
<p>가로 여백은 텍스트 줄 바꿈의 시작과 끝에서만 작동하지만 모든 줄에서 작동하길 원합니다. 테두리 반경이 각 줄의 중단점에 있지 않다는 점은 인정할 수 있지만 적용하려면 패딩이 필요합니다. </p>
<p>.header-text 클래스에 padding-top을 추가하면 두 줄 모두에 적용되므로 줄 바꿈 부분에서 가로 패딩 옵션이 왜 무시되는지 잘 모르겠습니다. </p>
<p>CSS에서 이 효과를 얻을 수 있는 방법이 있나요? </p>
