word-break: 줄바꿈 관련 CSS

오늘은 한 번도 생각하지 않았던 부분에 대해 피드백을 받게 되어 사용하게 된 CSS를 정리하려고 한다.

원래는 낱말이 자동으로 줄 바꿈이 되면 기존의 낱말이 떨어지는 경우가 일반적이다.

그런데 이 부분도 보기에는 좋지 않고 줄 바꿈에 의해 영어의 경우 하이폰(-)을 넣곤 하는데

그런 비슷한 기능이라 할 수 있다.

 

 

 

word-break 형식 정의

줄바꿈을 할 때 단어 기준으로 할지, 글자 기준으로 할지 정하는 속성입니다.

기본값: normal

상속 : 가능

애니메이션: 불가

버전: CSS Level 3

 

 

word-break: 값;

word-break의 값은 다음과 같다.

 

1) normal

기본 줄 바꿈 규칙을 사용합니다.

한국어는 한 글자씩, 영어는 한 단어씩 줄 바꿈이 실행이 된다.

 

2) break-all

오버플로를 방지하기 위해서는 어떠한 두 문자 사이에서도 줄 바꿈이 발생할 수 있다. (한중일 텍스트 제외)

한국어, 영어 모두 한 낱말씩 줄바꿈이 실행이 된다.

 

 

3) keep-all

한중일(CJK) 텍스트에서는 줄을 밥꿀 때 단어를 끊지 않는다. 비 CJK 텍스트에서는 normal과 동일하게 적용

한국어, 영어 모두 한 단어씩 줄바꿈이 실행이 된다.

 

4) break-word

실제 overflow-wrap 속성에 상관하지 않고, word-break: normal과 overflow-wrap: anywhere를 설정한 것과 같은 효과를 낸다.

한국어는 한 글자씩, 영어는 한 단어씩 줄바꿈이 실행이 된다. (결굴 normal과 같은 효과로 변질이 됨)

 

 

예시문

다음은 코드펜에서 위 예시문을 확인해볼 수 있다.

See the Pen CSS: word-break by miok-jung (@miok-jung) on CodePen.

 

 

 

오늘은 줄바꿈을 좀 더 보기 좋은 줄 바꿈으로 바꿔주는 CSS 코드를 알아보았다.

프로젝트를 하면서 느낀건 쉽게 넘어갈 수 있는 부분까지 확인하고 체크하여

사용자가 더 보기 좋게 하는 것이 바로 퍼블리셔의 역할이 아닌가 싶다.

필자는 프론트인데...

하지만 퍼블리셔를 더 좋아하지..