HTML 태그 없이 CSS에서 줄바꿈을 달성하는 방법은 무엇입니까?

HTML 태그 없이 CSS 줄 바꿈

추가 HTML 요소를 도입하지 않고 CSS만으로 줄 바꿈을 구현하려면 다음 방법을 사용하면 됩니다. :

문제:

글머리 기호 목록에서

요소이지만 이전은 아니고

같은 줄에. 기존 솔루션에서는 display: block; 그러나 이는 요소의 인라인 특성을 깨뜨립니다.

CSS 솔루션:

해결책은 CSS 의사 요소를 사용하여 줄 바꿈. CSS 코드는 다음과 같습니다.

h4 {
  display: inline;
}
h4:after {
  content: "\a";
  white-space: pre;
}

설명:

• display: inline;

  다른 텍스트와 같은 줄에.

• h4:after는

  뒤에 의사 요소를 생성합니다. 요소.

• 콘텐츠: "a"; 의사 요소에 줄 바꿈 문자를 삽입합니다.
• white-space: pre; 줄 바꿈을 유지합니다.

데모:

이 기술의 예는 여기에서 찾을 수 있습니다: http://jsfiddle.net/Bb2d7/

출처:

이 트릭에 대한 영감은 다음 StackOverflow 답변에서 나왔습니다: https://stackoverflow.com/a/66000/509752

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