> 웹 프론트엔드 > CSS 튜토리얼 > 여러 줄 범위에서 각 텍스트 줄의 시작과 끝 부분에 패딩을 추가하는 방법은 무엇입니까?

여러 줄 범위에서 각 텍스트 줄의 시작과 끝 부분에 패딩을 추가하는 방법은 무엇입니까?

Barbara Streisand
풀어 주다: 2024-11-07 17:15:03
원래의
382명이 탐색했습니다.

How to Add Padding to the Beginning and End of Each Line of Text in a Multi-Line Span?

각 텍스트 줄의 시작과 끝 부분에 패딩 추가

배경

이 시나리오에서는 범위가 배경이 있는 여러 줄로 확장됩니다. 색상. 사용자는 각 줄 끝에 10px 패딩을 원하지만 nbsp 태그를 수동으로 삽입하는 것은 피합니다. CSS 또는 JavaScript 솔루션이 선호됩니다.

CSS 솔루션

IE8 이상 버전의 Chrome, Firefox, Opera, Safari에서는 다음 CSS 및 HTML 코드가 창의적인 솔루션을 제공합니다.

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 }
로그인 후 복사

HTML:

<div>
로그인 후 복사

설명

이 기술은 다음에 대한 여러 div를 만듭니다. 각 줄에는 왼쪽에 패딩과 실선 테두리가 있습니다. 각 div 내에서 인라인 h3 요소가 텍스트를 배치합니다. 테두리를 제거하고 줄 높이를 추가하기 위해 부제목이 왼쪽으로 떠있습니다.

고려 사항

이 솔루션은 복잡하며 특정 브라우저에서 문제가 발생할 수 있습니다. 원하는 패딩의 시각적 근사치를 제공하지만 모든 경우에 완벽하지는 않을 수 있습니다.

위 내용은 여러 줄 범위에서 각 텍스트 줄의 시작과 끝 부분에 패딩을 추가하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿