[CSS] 긴 단어 처리 시 줄바꿈 기준 정하는 방법 (단어 기준 / 한 글자 기준)

Intro

안녕하세요. 이번 시간에는 CSS에서 긴단어 처리 시 줄바꿈 단어 기준을 정하는 방법에 대해 알아보겠습니다. 

 

How to solve the problem

 

아래의 html이 있다고 가정해봅시다. 

<p>{item.desc}</p>

 

처음에 제가 적용한 CSS는 다음과 같습니다. 단어 뒤에 elispsis 처리는 되었지만, 줄바꿈 처리가 제대로 안되고 있었습니다. 

> p {
    margin-bottom: 8rem;
    font-size: 10rem;
    line-height: 1.3;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
}

 

따라서 저는 word-break라는 속성을 이용하여 break-all 로 지정해줬습니다. 제 경우 한 글자 기준으로 줄바꿈을 하고 싶었기 때문에 아래의 속성을 사용하였는데요, 한글자가 아닌 단어 기준으로 정하고 싶다면 keep-all 을 활용하면 됩니다 .

> p {
    margin-bottom: 8rem;
    font-size: 10rem;
    line-height: 1.3;
    overflow: hidden;
    white-space: normal;
    text-overflow: ellipsis;
    display: -webkit-box;
    word-break: break-all;
}

 

---

https://developer.mozilla.org/en-US/docs/Web/CSS/word-break