Reference/CSS

word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.

by @webs 2022. 11. 19.

word-break

word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다. 줄바꿈을 할 때 단어를 기준으로 할지 말지 여부를 설정 할 수 있으며, 한국어를 기준으로 word-break: keep-all; 속성만 사용 가능합니다.

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

정의(Definition)

word-break 속성은 줄바꿈을 할때 단어를 기준으로 설정하는 속성입니다.

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

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

문법(Syntax)

word-break : normal | keep-all | break-all | break-word

/* 기본 속성 */
word-break: normal;
word-break: keep-all;
word-break: break-all;
word-break: break-word;

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

속성(Property)

속성값	값(예)	설명
normal	word-break: normal;	기본 줄바꿈 규칙이 적용됩니다.
keep-all	word-break: keep-all;	줄바꿈 할 때 단어를 유지하며 적용됩니다.
break-all	word-break: break-all;	CJK(중국어,일본어,한국어) 텍스트에서는 작동되지 않습니다.
~~break-word~~	~~word-break: break-word;~~	overflow-wrap: break-word 속성과 동일하기 때문에 현재는 사용하지 않습니다.

예제1(Sample)

줄바꿈을 설정한 예제입니다.

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

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

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

word-break: normal; word-break: keep-all; word-break: break-all; word-break: break-word;

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);
        })
    })
});