Reference/CSS

white-space 속성은 줄바꿈 및 공백을 설정합니다.

by @webs 2022. 11. 19.

white-space

white-space 속성은 줄바꿈 및 공백을 설정합니다. white-space: pre 속성은 <pre> 태그와 기능이 동일합니다. 마크업의 공백은 화면으로 표현될 때 한칸의 공백으로 인식합니다. white-space 속성 마크업상의 공백을 화면에 그대로 표현해 주며, 줄바꿈이나 줄 속성도 설정 할 수 있습니다.

특징	설명
기본값	white-space : normal
적용	text
버전	CSS3
사용성	★☆☆☆☆

정의(Definition)

white-space 속성은 줄바꿈, 공백을 설정합니다.
white-space : pre 속성은 <pre> 태그와 기능이 동일합니다.
white-space 속성 중 공백은 마크업상의 공백을 화면에 그대로 표현해 줍니다.

줄바꿈과 관련된 속성 및 태그

white-space 속성은 줄바꿈, 공백 여부를 설정합니다.
word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.
overflow-wrap 속성은 의미가 없는 텍스트 줄바꿈을 설정합니다.
hyphens 속성은 텍스트 줄바꿈 할때 하이픈으로 연결하는 방법을 설정합니다.
<br> 태그는 텍스트 줄바꿈을 설정합니다.
<wbr> 태그는 의미가 없는 텍스트 줄바꿈을 설정합니다.
<pre> 태그는 공백을 설정합니다.

문법(Syntax)

/* 기본 속성 */
white-space: normal;
white-space: pre;
white-space: nowrap;
white-space: pre-wrap;
white-space: break-spaces;
white-space: pre-line;

/* 전역 속성 */
white-space: inherit;   /* 상속 */
white-space: initial;   /* 초기화 */
white-space: revert;    /* 원래대로 돌리기 */
white-space: unset;     /* 설정 해제 */

속성(Property)

속성값	값(예)	설명
normal	white-space: normal;	줄바꿈을 인식하고, 공백을 인식하지 못합니다. 기본값
nowrap	white-space: nowrap;	줄바꿈, 공백을 인식하지 못합니다. 한 줄로 정렬
pre	white-space: pre;	줄바꿈은 인식 못하고, 공백만 인식합니다.
pre-wrap	white-space: pre-wrap;	줄바꿈, 공백을 인식합니다.
pre-line	white-space: pre-line;	줄바꿈 인식하고, 공백은 앞쪽만 인식합니다.
break-spaces	white-space: break-spaces;	줄바꿈, 공백을 글자를 기준으로 인식합니다.

white-space 속성 비교

속성값	줄바꿈	공백	끝 공백
normal	줄바꿈 인식 함.	공백 인식 못함.	끝 공백 제거.
nowrap	줄바꿈 인식 못함.	공백 인식 못함.	끝 공백 제거.
pre	줄바꿈 인식 못함.	공백 인식 함.	끝 공백 유지.
pre-wrap	줄바꿈 인식 함.	공백 인식 함.	끝 공백 넘침.
pre-line	줄바꿈 인식 함.	공백 앞쪽만 인식 함.	끝 공백 제거.
break-spaces	줄바꿈 인식 함.	공백 인식 함.	끝 공백 줄바꿈.

예제1(Sample)

공백을 설정한 예제입니다.

어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.

운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 단지 행운만 좋았기 때문이다. 운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 열심히 할수록 운은 나에게 온다.

정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다. 다름 사람에게도 정직해야 하지만 그 무엇보다 나 자신한테 정직해야 한다.

white-space: normal; white-space: nowrap; white-space: pre; white-space: pre-wrap; white-space: pre-line; white-space: break-spaces;

HTML

CSS

SCRIPT

<div class="text-box">
    <div class="box">
        어려을 때부터 나만의 공간을 만드는 것을 좋아했고 나만의 다락방을 좋아했다. 단 한 사람이라도 내가 만든 공간 속에서 영감을 받거나 마음이 움직였으면 좋겠다. 서울에는 집이 없지만, 이곳에서는 나만의 집이 많다. 그 집은 비용도 들지 않고 언제든지 만들 수 있다. 나만의 공간을 마음것 만들 수 있다는 건 코딩에 엄청난 매력인거 같다. 그 한구석에 나만의 꿈을 설계하고 디자인을 하며 앞으로도 살고 싶다.
    </div>
    <div class="box">
        운이 좋은 사람은 없다. 단지 운을 만들 뿐이다. 운을 만들기 위해서는 내가 좋아하는 일이나 내가 하고 싶은 일에 몰두하면 된다. 몰두 하다보면 길이 보이고 방향이 보이게 된다. 운이란 고된 노동과 노력을 통해 스스로 만들어 내는 것이다. 복권에 당첨되는 사람들은 금방 돈을 허비하게 된다. 단지 행운만 좋았기 때문이다. 운을 만든 사람은 돈을 날려먹거나 헛되게 쓰지 않는다. 열심히 할수록 운은 나에게 온다.
    </div>
    <div class="box">
        정직은 다른 사람보다 나에게 큰 의미를 부여해야 한다. 자신이 정직하지 않으면 진정으로 원하는 일을 열정적으로 밀고 나갈 수 없다. 마음에서 우러나오는 일을 해야 정직해지며 삶을 더 즐길 줄 알게 된다. 다름 사람에게도 정직해야 하지만 그 무엇보다 나 자신한테 정직해야 한다.
    </div>
</div>

.text-box .box {
    width: 100%;
    line-height: 1.4;
    text-align: justify;
    border: 1px solid #333;
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
}
.text-box.overflow .box {
    overflow: visible;
}
.text-box.white .box {
    white-space: normal;
}
.sampleBtn1.red, .sampleBtn2.red {
    border-color: #ff4b4b !important;
    color: #ff4b4b !important;
}
@media (max-width:800px){
    .text-box .box {
        width: 100%;
        margin-bottom: 2%;
    }
}

const btn1 = document.querySelector("#sample1 .sampleBtn1");
const btn2 = document.querySelector("#sample1 .sampleBtn2");
const box1 = document.querySelector("#sample1 .text-box")

btn1.addEventListener("click", (e)=> {
    e.preventDefault();
    box1.classList.toggle("overflow");
    btn1.classList.toggle("red");
    
    if(box1.classList.contains("overflow")){
        btn1.innerText = "white-space: normal";
    } else {
        btn1.innerText = "white-space: nowrap";
    }
})
btn2.addEventListener("click", (e)=> {
    e.preventDefault();
    box1.classList.toggle("white");
    btn2.classList.toggle("red");
    
    if(box1.classList.contains("white")){
        btn2.innerText = "overflow: visible";
    } else {
        btn2.innerText = "overflow: hidden";
    }
})

document.querySelectorAll("#sample1 .sampleBtn3 a").forEach(btn => {
    btn.addEventListener("click", (e)=> {
        e.preventDefault();
        const text = btn.innerText;
        document.querySelectorAll("#sample1 .text-box .box").forEach(box => {
            box.setAttribute("style", text);
        })
    })
});