`` 없이 CSS 전용 줄 바꿈을 만드는 방법은 무엇입니까?

CSS 전용 줄 바꿈: 너머

추가 HTML 태그를 도입하지 않고 순수 CSS에서 줄 바꿈을 만드는 과제는 당황한 개발자들. 이는 요소의 인라인 정렬을 유지하면서

와 같은 특정 요소 뒤에 줄 바꿈을 원할 때 특히 적합합니다.

CSS 솔루션

다행히도 영리한 CSS 해결 방법을 사용하면 원하는 효과를 얻을 수 있습니다. display: inline 속성을 활용하고 요소의 내용 및 공백 속성을 조작하면 대상 요소 뒤에 특히 줄바꿈을 유도할 수 있습니다.

<code class="css">h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}</code>

이 코드에서 display: inline 속성은

요소는 같은 줄에 남아 있습니다. 줄 바꿈의 핵심은 :after 의사 요소에 있습니다. 내용을 줄 바꿈을 나타내는 ASCII 문자 a로 설정하고 공백을 pre로 설정하면

다음에 강제로 줄바꿈이 적용됩니다.

사용 예시

다음 HTML을 고려하세요.

<code class="html"><li>
  Text, text, text, text, text. <h4>Sub header</h4>
  Text, text, text, text, text.
</li></code>

위 CSS를 이 HTML에 적용하면

인라인 위치를 유지하는 요소:

<code class="css">li h4 {
  display: inline;
}
li h4:after {
  content: "\a";
  white-space: pre;
}</code>

결론

이 CSS 기술은 인라인 요소 이후에도 순수 CSS에서 줄 바꿈을 구현하는 안정적인 방법을 제공합니다. HTML 수정이 불가능한 시나리오에 바람직한 솔루션을 제공합니다.

위 내용은 `` 없이 CSS 전용 줄 바꿈을 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!