CSS만 사용하여 요소 앞에 줄 바꿈을 삽입하려면 어떻게 해야 합니까?

CSS로 줄 바꿈 만들기

문제:

요소 앞에 줄 바꿈 삽입 HTML의
태그는 간단합니다. 그러나 동일한 효과를 얻기 위해 CSS를 사용하는 것은 어려운 일입니다.

해결책:

CSS 콘텐츠 속성을 활용하면 요소 앞에 줄 바꿈을 삽입할 수 있습니다. . 비결은 생성된 콘텐츠 내에서 A 이스케이프 시퀀스를 사용하는 것입니다.

코드:

#restart:before { content: '\A'; }

고려 사항:

어떤 경우에는 white-space:pre;를 추가합니다. 상위 요소(#restart)에 대한 추가 작업이 필요할 수 있습니다. 이렇게 하면 브라우저가 공백 문자를 유지하게 됩니다.

대체 접근 방식:

대체 접근 방식은 공백 문자(' ')를 사용하고 이를 블록으로 설정하는 것입니다. 요소:

:before { content: ' '; display: block; }

참고:

• A는 줄의 끝을 나타냅니다.
• 대체 접근 방식은 빈 블록 요소를 추가합니다. , 일부 애플리케이션에는 적합하지 않을 수 있습니다.

추가 통찰력:

이 기술에 대한 자세한 내용은 CSS2 사양을 참조하세요.

위 내용은 CSS만 사용하여 요소 앞에 줄 바꿈을 삽입하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!