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인 경우 e03b848252eb9375d56be284e690e873 태그에 따라 처리됩니다.

p {
    white-space: pre;
}

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

4.white-space: pre-wrap

white-space 속성이 pre-wrap인 경우, 기본적으로 e03b848252eb9375d56be284e690e873 태그와 동일한 방식으로 처리됩니다. 컨테이너의 용량을 초과하면 줄 바꿈이 발생합니다.

p {
    white-space: pre-wrap;
}

텍스트 시작 부분의 공백, 내부 공백, 줄 바꿈은 모두 유지되며 컨테이너 외부에서는 줄이 끊어집니다.

5.white-space: pre-line

white-space 속성이 pre-line인 경우 개행 문자를 유지한다는 의미입니다. 그대로 출력되는 개행 문자를 제외하고 다른 모든 것은 공백:일반 규칙과 일치합니다.

p {
    white-space: pre-line;
}

텍스트 내부의 줄 바꿈이 공백으로 변환되지 않는 점을 제외하고 다른 처리 규칙은 일반과 일치합니다. 이는 시 형식의 텍스트에 유용합니다.

프로그래밍과 관련된 더 많은 내용은 PHP 중국어 홈페이지 프로그래밍 입문 칼럼을 주목해주세요!

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