CSS에서 공백을 처리하는 방법

white-space 속성

CSS는 공백을 처리하는 보다 정확한 방법을 제공할 수 있는 공백 속성을 제공합니다. 이 속성에는 총 6개의 값이 있습니다. 공통 상속(부모 요소 상속) 외에 나머지 5개의 값은 아래에 소개되어 있습니다.

1. 공백: 일반

공백 속성의 기본값은 일반입니다. 이는 브라우저가 공백을 일반적인 방식으로 처리한다는 의미입니다.

html:
    <p>  hellohellohello hello
    world
    </p>
style:
    p {
        width: 100px;
        background: red;
    }

위 코드에는 텍스트 앞에 공백 두 개가 있고 그 안에 긴 단어와 개행 문자가 있습니다.

텍스트 시작 부분의 공백은 무시됩니다. 컨테이너가 너무 좁기 때문에 첫 번째 단어가 컨테이너를 넘치고 그 뒤에 한 칸을 넘깁니다. 텍스트 내의 줄 바꿈은 자동으로 공백으로 변환됩니다.

관련 튜토리얼 추천:

CSS 동영상 튜토리얼, 학습 주소: https://www.php.cn/course/list/12.html

2.white-space: nowrap

white -space 속성이 이제 랩되면 컨테이너 너비 초과로 인해 줄바꿈이 발생하지 않습니다.

p {
    white-space: nowrap;
}

모든 텍스트는 줄 바꿈 없이 한 줄로 표시됩니다.

3.white-space: pre

white-space 속성이 pre인 경우

 태그에 따라 처리됩니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>p {
    white-space: pre;
}

로그인 후 복사

위 결과는 원본 텍스트와 정확히 동일하며 모든 공백과 줄 바꿈이 유지됩니다.

4.white-space: pre-wrap

white-space 속성이 pre-wrap인 경우, 기본적으로

 태그와 동일한 방식으로 처리됩니다. 컨테이너의 용량을 초과하면 줄 바꿈이 발생합니다. </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>p {
    white-space: pre-wrap;
}

로그인 후 복사