실무에서 일하다보면 문자 관련해서 아래와 같은 경우를 종종 마주친다.
- 박스의 너비는 고정되어 있는데 문자가 길어져 아래와 같이 어색하게 끊기는 경우
구독 쿠폰 할 인율은 30% 입 니다.
.jsx(or .tsx)파일에서\n을 사용했는데 줄바꿈이 적용이 안된다. (그렇다고<br />태그를 넣자니 그대로 문자 안에 노출된다.)
분명 아는 놈인데 어떻게 했더라.. 하면서 검색하는 시간이 아까워 정리해둔다.
1-1. word-break
글자-쪼개기, 즉 박스 밖으로 글자가 넘어가면 글자를 어떻게 쪼갤지(줄바꿈할 지) 결정하는 속성이다. 아시아권 언어냐 비아시아권 언어냐에 따라 속성이 적용되는
- word-break : normal
일반적인 줄 바꿈 지점(두 단어 사이의 공백)에서만 줄을 바꾼다. - word-break : break-all
문자를 강제로 줄바꿈 할 수 있다. 단, 비아시아권 언어에만 이에 해당하며 아시아권 언어는 normal과 동일한 효과다. - word-break : keep-all
아시아권 텍스트에서는 줄바꿈 시 단어를 끊지 않는다. 비아시아권 텍스트라면 normal과 동일한 효과다.
1-2. overflow-wrap (legacy 버전은 word-wrap)
word-break가 아시아권 언어(CJK)에 적용 가능하다면, overflow-wrap은 더 넓은 범위, 즉 비아시아권 언어까지 커버되는 속성이다. 한국 서비스를 개발하게 된다면 overflow-wrap보단 word-break를 좀 더 애용하게 될 것 같다.
그래도 간단히 속성만 정리하자면,
- overflow-wrap : normal
일반적인 줄 바꿈 지점(두 단어 사이의 공백)에서만 줄을 바꾼다. - overflow-wrap : break-all
쪼개질 부분이 안보이면 그냥 알아서 쪼개준다. 단, 단어 자체를 쪼개진 않는다. (ex. b/eautiful 이런 식으로 쪼개서 줄바꿈하지 않음)
2. white-space
위 속성들이 텍스트의 줄바꿈을 중심으로 적용되는 속성이라면 white-space는 요소가 공백 문자를 처리하는 법을 정한다.
- white-space : normal
연속 공백을 하나로 합친다. (개행 문자도 연속 두 번이라면 한 번으로 합친다.) 만약 한 줄이 박스 너비를 넘는다면 자동으로 줄바꿈을 적용한다. 공식 문서에서 하나로 처리한다는 말이 좀 모호한데, 텍스트 맨 앞 혹은 맨 뒤에 공백이 있다면 그건 없애고 중간에 있는 공백은 띄어쓰기 하나 정도로 처리한다는 뜻으로 이해했다. - white-space : nowrap
연속 공백을 하나로 합친다. 안감싼다는 단어 말 그대로<br />태그가 있을 때만 줄바꿈이 발생하며 나머지는 공백을 모두 하나로 합친다. - white-space : pre-wrap
연속 공백은 유지한다. 줄바꿈은 개행문자(\n)와<br />태그가 있을 때 일어나며, 한 줄이 너무 길다면 자동 줄바꿈이 적용된다. - white-space : pre-line
연속 공백을 하나로 합친다. 줄바꿈은 개행문자(\n)와<br />태그가 있을 때 일어나며, 한 줄이 너무 길다면 자동 줄바꿈이 적용된다.
단순 줄바꿈만 적용을 원한다면 pre-line이 적절할 수 있겠다. 문단 텍스트 맨 앞이나 맨 뒤에 존재하는 공백은 알아서 없애주기 때문에..
FE developer