계발하는 개발자

[CSS] White-space / 요소의 공백 처리 방법을 정하는 속성 본문

📌 Language/CSS

[CSS] White-space / 요소의 공백 처리 방법을 정하는 속성

dev_genie 2022. 12. 27. 20:55

white-space 속성은 요소의 공백을 어떻게 처리할 지를 정의한다.

td 요소의 nowrap 속성을 사용하지 않고도 CSS에 배치 금지를 지정할 수 있다. 

white-space 속성 
normal 연속된 공백과 줄 바꿈은 메꾸어져서 하나의 공백으로 표시됩니다.
소스(Source)내의 줄 바꿈 문자도 공백 문자로써 처리됩니다. 필요하다면 긴 줄을 줄바꿈 합니다.
nowrap normal과 같이 공백을 채우지만 가로로 긴 줄에서도 줄 바꿈을 하지 않고 표시합니다.
pre 연속된 공백을 그대로 표시합니다. 또한 긴 줄도 줄 바꿈하지 않고 표시합니다.
pre-wrap 연속 공백은 그대로 유지됩니다. 행(行)의 줄 바꿈은 행의 박스를 채우기 위해 필요한 경우에 실행합니다.
pre-line 연속 공백은 메꾸어져 하나의 공백이 됩니다. 행의 줄 바꿈은 행의 박스를 메꾸기 위해 필요한 때에 실행됩니다.

 

  선택자 {white-space : 속성 값}

위에서 아래로 - normal, nowrap, pre, pre-wrap, pre-line

<style type="text/css">
        p {
            width: 400px;
            border: 1px solid #000;
        }

        .white1 {
            white-space: normal;
        }

        .white2 {
            white-space: nowrap;
        }

        .white3 {
            white-space: pre;
        }

        .white4 {
            white-space: pre-line;
        }

        .white5 {
            white-space: pre-wrap;
        }
    </style>

</head>

<body>
    <p class="white1">
        좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다
        -단테-
    </p>
    <p class="white2">
        좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다
        -단테-
    </p>
    <p class="white3">
        좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다
        -단테-
    </p>
    <p class="white4">
        좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다
        -단테-
    </p>
    <p class="white5">
        좋은 성과를 얻으려면 한 걸음 한 걸음이 힘차고 충실하지 않으면 안 된다
        -단테-
    </p>
</body>
LIST

'📌 Language > CSS' 카테고리의 다른 글

[CSS] z-index | 요소의 쌓임 순서를 정의하는 속성  (0) 2022.12.28
[CSS] overflow 속성 - 넘치는 컨텐트 요소 제어하기  (0) 2022.12.27
[CSS] Outline vs Border 차이  (0) 2022.12.27
[CSS] Float 그리고 Clear  (0) 2022.12.27
[CSS] 박스 크기를 결정하는 box-sizing : border-box, content-box  (0) 2022.12.20
profile

dev_genie

@dev_genie

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!