집 >웹 프론트엔드 >CSS 튜토리얼 >CSS 공백 속성을 사용하는 방법

CSS 공백 속성을 사용하는 방법

青灯夜游원래의: 2019-05-27 14:09:075620검색

css 공백 속성은 요소 내에서 공백을 처리하는 방법을 설정하는 데 사용됩니다. 예를 들어 공백: nowrap이 설정된 경우 줄 시작과 끝의 모든 줄 바꿈과 공백이 병합되고 텍스트가 병합됩니다. 텍스트는
태그를 만날 때까지 같은 줄에 계속 표시됩니다.

CSS 공백 속성을 사용하는 방법

CSS 공백 속성을 사용하는 방법은 무엇입니까?

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

이 속성은 레이아웃 프로세스 중에 요소의 공백 문자를 처리하는 방법을 선언합니다.

구문: 

white-space : normal | pre | nowrap | pre-wrap | pre-line ;

속성 값:

normal: 기본값. 브라우저는 공백을 무시합니다.

pre: 브라우저가 공백을 유지합니다. 이는 HTML의

 태그처럼 작동합니다. <p>nowrap: 텍스트는 줄바꿈되지 않으며 <br> 태그가 나타날 때까지 같은 줄에 계속 표시됩니다. </p><p>pre-wrap: 공백 시퀀스를 유지하지만 정상적으로 래핑합니다. </p><p>pre-line: 공백 시퀀스를 병합하지만 개행은 유지합니다. </p><p><strong>참고: </strong>pre-wrap 및 pre-line 값은 CSS 2.1의 새로운 값입니다. </p><p>참고: 모든 버전의 Internet Explorer(IE8 포함)는 속성 값 "inherit"를 지원하지 않습니다. </p><p><span style="font-size: 18px;"><strong>css 공백 속성 예 </strong></span></p><pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
	</head>

	<head>
		<style type="text/css">
			.box{
				width: 500px;
				border: 1px solid #000;
				margin-bottom:10px ;
			}
			.p1 {
				white-space: nowrap
			}
		</style>
	</head>

	<body>
		<div class="box">
			<p>
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
			</p>
		</div>
		<div class="box">
			<p class="p1">
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
				php中文网
			</p>
		</div>
		
	</body>

</html>

출력:

CSS 공백 속성을 사용하는 방법

위 내용은 CSS 공백 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css html

성명：

이전 기사：CSS 변환 원본 속성을 사용하는 방법다음 기사：CSS 변환 원본 속성을 사용하는 방법