CSS text-overflow: nowrap, ellipsis (행 나누기, 줄 바꿈 속성 line break)

CSS에서 띄어쓰기 및 줄바꿈에 관여하는 text-overflow와 white-space, word-break 태그를 알아보자.

white-space : 띄어쓰기 & 줄바꿈 공백

속성값(value):

- white-space: normal; (기본값)
- white-space: nowrap;
- white-space: pre;

---

white-space: normal (지정하지 않았을 때의 기본값)

여러번 띄어쓰기를 하거나 줄바꿈을 해도 1칸(space bar 1회)으로 인식한다. 지정된 넓이 끝에서 자동 줄바꿈 된다.

white-space: pre
실제 입력 된 공백과 줄바꿈을 모두 보여 준다. 단, 지정된 넓이를 넘어서도 강제 줄바꿈을 하지 않는다.

white-space: nowrap
연속되는 여러 개의 공백이나 줄바꿈을 1칸으로 인식한다.
지정된 넓이를 벗어나도 강제 줄바꿈을 하지 않는다.
(부모요소가 텍스트를 감싸지 못하고, 텍스트가 줄바꿈 없이 부모 요소를 넘어선다. => no wrap한다.)


* white-space: inherit; 부모 요소의 속성값을 상속 받는다.

---

word-break : 단어&글자 기준 줄바꿈

한 단어나, 글자 기준으로 줄 바꿈한다. (=블럭요소 기준 줄바꿈)

속성값(value):
- white-space:normal; (기본값)
- white-space:break-all;
- white-space:keep-all;

---

word-break: normal
단어 단위로 끊어서 줄바꿈한다. 너비에 가득 차지 않고 우측에 공백이 조금씩 있는 형태.

word-break: break-all
글자 단위로 끊어서 줄바꿈한다. 블럭요소의 너비에 가득 차있는 형태.


word-break: keep-all
한글의 경우 띄어쓰기 기준으로 줄바꿈 한다.

---

text-overflow : 텍스트가 블럭요소를 넘어설 때

Text의 양이 많아, 블럭요소를 넘어서 오버플로우 되었을 때 처리하는 속성 값이다.


속성값(value):
- white-space:clip;
- white-space:ellipsis;

---

text-overflow: clip
상자 테두리에 닿는 오버플로우 문자들을 모두 자른다. (테두리를 넘어서면 모두 잘림)

text-overflow: ellipsis
상자 테두리에 닿게 되면 오버플로우 된 문자들을 말줄임표 (...) 로 바꾼다.






*참고 !
text-overflow:ellipsis(말줄임표) 는 고정된 width값
즉, white-space:nowrap; 또는 overflow:hidden; 속성이 있어야 적용 됨.


*width의 값은 px, % 모두 설정 가능함.