[css] 단어를 기준으로 줄바꿈 하려면? word-break:keep-all

코딩/web|2020. 10. 15. 20:01

728x90

줄바꿈과 관련된 CSS 속성은 word-break입니다. 기본값은 normal인데, 어떻게 작동하는지 한번 살펴보도록 하겠습니다. 우리가 주로 많이 사용하는 언어는 한글과 영어니 한글과 영어가 동시에 있는 글에 대해 줄바꿈이 어떻게 이뤄지는지 보시죠. 

 

1. 디폴트값(word-break:normal)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
<!-- default setting -->
<p>이 글은 영어와 한글이 혼재해 있는 글입니다. 이글은영어와한글이혼재해있는글입니다. 이 글은 영어와 한글이 혼재해 있는 글입니다. 이글은영어와한글이혼재해있는글입니다. Hello. Everyone. I'm Kyohoon Sim. Nice to meet you. Hello.Everyone. I'mKyohoonSim.Nicetomeetyou. Hello. Everyone. I'm Kyohoon Sim. Nice to meet you. Hello.Everyone. I'mKyohoonSim.Nicetomeetyou.</p>   
 
</body>
</html>
cs

 

디폴트 세팅(normal) 줄바꿈 상황

 

보시다시피 영어는 단어를 기준으로 줄바꿈이 이뤄지지만, 한글은 글자를 기준으로 줄바꿈이 이뤄집니다. 무슨 말인가 하면, 영어는 아직 줄이 다 차지 않아도 다음 단어가 길어서 해당 줄을 넘어서는 상황이라면 줄바꿈을 해버리고, 한글은 단어를 중간에 끊는 일이 있더라도 줄을 거의 다 채운 후에 줄바꿈을 합니다. 

 

2. 단어를 기준으로 줄바꿈하기(word-break:keep-all)

만약 영어든 한글이든 상관없이 항상 단어를 기준으로 줄바꿈이 되게 하려면 어떻게 해야할까요? 바로 word-break 속성의 값을 keep-all로 변경해주면 됩니다. 

 

1
2
<!-- keep-all -->
<p style="word-break: keep-all;">이 글은 영어와 한글이 혼재해 있는 글입니다. 이글은영어와한글이혼재해있는글입니다. 이 글은 영어와 한글이 혼재해 있는 글입니다. 이글은영어와한글이혼재해있는글입니다. Hello. Everyone. I'm Kyohoon Sim. Nice to meet you. Hello.Everyone. I'mKyohoonSim.Nicetomeetyou. Hello. Everyone. I'm Kyohoon Sim. Nice to meet you. Hello.Everyone. I'mKyohoonSim.Nicetomeetyou.</p>   
cs

 

keep-all

 

keep-all로 설정하니, 한글도 영어와 마찬가지로 단어를 기준으로 줄바꿈이 되었습니다. 

 

3. 글자를 기준으로 줄바꿈하기(word-break:break-all)

이번에는 영어든 한글이든 상관없이 글자를 기준으로 줄바꿈되게 해보겠습니다. word-break 속성의 값으로 break-all을 주면 됩니다. 

 

1
2
<!-- break-all -->
<p style="word-break: break-all;">이 글은 영어와 한글이 혼재해 있는 글입니다. 이글은영어와한글이혼재해있는글입니다. 이 글은 영어와 한글이 혼재해 있는 글입니다. 이글은영어와한글이혼재해있는글입니다. Hello. Everyone. I'm Kyohoon Sim. Nice to meet you. Hello.Everyone. I'mKyohoonSim.Nicetomeetyou. Hello. Everyone. I'm Kyohoon Sim. Nice to meet you. Hello.Everyone. I'mKyohoonSim.Nicetomeetyou.</p>  
cs

 

break-all

 

영어도 한글과 마찬가지로 중간에 단어가 끊기고 줄바꿈이 된 것을 확인하실 수 있습니다. 

 

normal, keep-all, break-all 말고 또 다른 값들도 있지만, 오늘 소개해드린 이 정도가 유용하게 사용할 만한 값들인 것 같습니다. 

 

 

 

<참고자료>

[1] www.w3schools.com/cssref/css3_pr_word-break.asp, w3schools.com, "CSS word-break Property"

  1. 사랑합니다 2020.10.15 20:15 댓글주소  수정/삭제  댓글쓰기

    나중에 코딩 배울 때 참고 하면 좋을 것 같아요. 감사합니다. ㅎㅎㅎ
    공감 버튼 꾹 누르고 갑니다~ 자주 소통해요. ^^