CSS만 사용하여 요소 뒤에 강제로 줄바꿈을 할 수 있나요?

CSS로 줄 바꿈 만들기

줄 바꿈이 필요하지만 추가 HTML 태그를 추가하고 싶지 않으신가요? CSS가 당신을 다뤘습니다!

와 같은 특정 요소 뒤에서 줄 바꿈을 수행하는 방법은 다음과 같습니다.

질문:

CSS만 사용하여 요소 뒤에서 강제로 줄 바꿈을 할 수 있습니까? , HTML 태그를 추가하지 않고?

도전 과제:

내에 자리잡은 요소:

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

다음에 줄 바꿈을 원합니다. 하지만 이전에는 그렇지 않았습니다. 인라인으로 유지하면서요. 그러나 설정 표시: 블록; 요소의 위치 지정을 방해하므로 옵션이 아닙니다.

해결책:

영리한 CSS를 사용하면 다음과 같이 달성할 수 있습니다.

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

설명:

• 디스플레이: 인라인;

  같은 줄에 요소가 있습니다.

• h4:after는

  뒤에 의사 요소를 생성합니다. 유니코드 문자 "a"(줄 바꿈)를 삽입합니다.

• white-space: pre; 삽입된 줄 바꿈이 표시되는지 확인하세요.

예:

라이브 데모를 보려면 이 바이올린을 확인하세요. http://jsfiddle.net/Bb2d7 /

위 내용은 CSS만 사용하여 요소 뒤에 강제로 줄바꿈을 할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!