HTML에서 텍스트의 공백을 유지하는 방법

HTML에서는 공백 속성을 사용하여 텍스트에 공백을 유지할 수 있습니다. 요소에 "white-space:pre|pre-line" 스타일만 설정하면 됩니다. 공백 속성은 레이아웃 프로세스 중에 요소의 공백 문자를 처리하는 방법을 선언합니다.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

HTML의 공백 규칙

HTML 콘텐츠의 여러 공백은 일반적으로 하나로 간주되며 연속된 공백은 자동으로 병합됩니다. 동시에 다음과 같이 콘텐츠 앞과 뒤의 공백도 지워집니다.

<p> fly63   com </p>　

표시 효과는 다음과 같습니다.

fly63 com　

참고: 브라우저의 이 메커니즘은 탭(t) 및 줄 바꿈( r 및 n),
태그를 사용하여 명시적으로 표현할 수 있습니다.

white-space 속성은 요소 내의 공백을 처리하는 방법을 설정합니다.

이 속성은 레이아웃 프로세스 중에 요소의 공백 문자를 처리하는 방법을 선언합니다. pre-wrap 및 pre-line 값은 CSS 2.1의 새로운 기능입니다.

1. CSS의 공백 속성 값이 pre인 경우

 태그에 따라 처리됩니다. 브라우저는 텍스트에서 공백과 줄 바꿈을 유지합니다. 예: <pre class='brush:php;toolbar:false;'><p style="white-space:pre"> fly63  com <p>

표시 효과는 다음과 같습니다. ' fly63 com '

2 CSS의 공백 속성이 줄 바꿈을 유지한다는 의미입니다. . 그대로 출력되는 개행 문자를 제외하고 다른 모든 것은 공백:일반 규칙과 일치합니다.

<p style="white-space: pre-line">
	fly63
	com
</p>

디스플레이 효과는:

'fly63

com'

권장 학습: html 비디오 튜토리얼

위 내용은 HTML에서 텍스트의 공백을 유지하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!