[HTML/CSS] 글자 짤림 / 줄바꿈 규칙 정하기

글자 단위/단어 단위로 줄바꿈 설정하기

 

사이트에서 줄바꿈 되는 단위가 글자로 되어 있으면 가독성이 불편할 뿐만 아니라, 미적으로 신경쓰이게 됩니다. 때문에 단어 단위로 줄바꿈을 하는 것이 권장됩니다. 주로 'keep-all' 혹은 'break-word' 방식을 사용합니다.

 

HTML/CSS 코드

CSS 속성

word-break : 텍스트가 줄 끝에 도달할 때 단어를 자르는 방식을 지정합니다.

 

CSS 값

• normal : 디폴트(Default) 줄 바꿈 규칙을 사용합니다. 영역 밖으로 단어가 튀어(overflow)나올 수 있습니다.
• break-all : 텍스트가 영역 밖으로 튀어 나오는 것을 방지합니다. 글자 단위로 줄 바꿈이 이뤄집니다.
• keep-all : 한/중/일 텍스트에 대해서는 줄을 바꿀 때 단어를 자르지 않습니다. 한/중/일 텍스트가 아닌 경우 'normal'과 동일하게 동작합니다.
• break-word : 영역 밖으로 텍스트가 튀어나오는 것을 방지하기 위해, 단어 중간에서 줄바꿈이 이뤄질 수 있습니다.
• initial : 디폴트(Default) 줄 바꿈 규칙을 적용합니다.
• inherit : 부모 요소의 줄 바꿈 규칙이 적용됩니다.

 

 

실제 CSS 코드

html, body, div, span, h1, h2, h3, h4, h5, h6, p, pre {
    word-break: keep-all;
}