텍스트 줄의 시작과 끝에 여백 추가
특정 텍스트 줄에 여백이 필요한 경우는 다양한 디자인 시나리오에서 발생할 수 있습니다. 이 경우 사용자는 범위 요소의 각 줄 끝에 10px 패딩을 원합니다.
CSS 접근 방식:
제공된 CSS 코드는 창의적인 솔루션을 제공합니다. 이 효과를 얻으려면. 인라인 블록, 테두리 왼쪽 스타일 및 위치 지정 트릭의 조합을 활용하여 원하는 패딩을 시뮬레이션합니다.
#titleContainer { width: 520px; } h3 { margin:0; font-size: 42px; font-weight: bold; font-family: sans-serif; } h3 .heading { background-color: #000; color: #00a3d0; } h3 .subhead { background-color: #00a3d0; color: #000; } div { line-height: 1.1; padding: 1px 0; border-left: 30px solid #000; display: inline-block; } h3 { background-color: #000; color: #fff; display: inline; margin: 0; padding: 0; } h3 .indent { position: relative; left: -15px; } h3 .subhead { padding: 0 15px; float: left; margin: 3px 0 0 -29px; outline: 1px solid #00a3d0; line-height: 1.15; }
이 솔루션은 인상적이기는 하지만 문제가 없는 것은 아니며 모든 브라우저에 권장되지 않습니다. . 그러나 이는 CSS 기술의 유연성을 보여줍니다.
JS 솔루션:
보다 간단한 접근 방식을 위해 JavaScript를 사용하여 줄바꿈을 찾고 줄 바꿈을 추가할 수 있습니다. 필요에 따라 공간을 확보하세요.
위 내용은 CSS 및 JavaScript에서 텍스트 줄 끝에 패딩을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!