white-space

공백과 줄바꿈을 어떻게 다룰 것인지 지정!

1. white-space: normal;

• 연속 공백, 줄바꿈을 모두 띄어쓰기 한 칸으로 표시
  (기본값)
• 텍스트가 너무 길어서 부모 요소의 가로폭을 넘어갈 때
  자동 줄바꿈. 수동 줄바꿈 불가!!

3. white-space: nowrap;

• 텍스트가 너무 길어서 부모 요소의 가로폭을 넘어가도
  자동 줄바꿈 X. 이 점을 제외하고 normal과 동일

2. white-space: pre;

• 원문 그대로 출력

2. white-space: pre-wrap;

• 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈. 이 점을 제외하고 pre와 동일
• 장점: 좌우 방향으로 스크롤바가 없어도 텍스트를 잘리지 않게 보여줄 수 있음

4. white-space: inherit;

• 부모요소 값을 상속

word-break

아시아, 비아시아 언어의 줄바꿈을 모두 제어
(강제 줄바꿈 방지, 텍스트 길이 제한)

1. word-break: normal;

• 한글, 중국어, 일본어 (약칭: CJK)는 글자 기준,
  이외는 단어 기준으로 줄바꿈
  (기본값)

2. word-break: break-all;

• 글자 기준으로 강제 줄바꿈

3. word-break: keep-all;

• 단어 기준으로 강제 줄바꿈

4. word-break: nowrap;

• 줄바꿈을 하지 않음

5. word-break: break-word;

• 모든 언어에서 글자 기준으로 줄바꿈
  (문장 의미가 제대로 전달되지 않을 수 있어서 CJK에서 사용하면 안 됨.)
• 현재 거의 사용되지 않음.

6. white-break: inherit;

• 부모요소 값을 상속

가끔씩 url 텍스트가 들어갈 경우 개행되지 않기 때문에 UI가 깨진 것 같은 현상이 종종 발생함.
이럴 경우 이 방법으로 해결 가능!

• 영어 + 한글 데이터가 들어갈 수 있는 경우 word-break: break-all
• 영어만 들어간다면 word-wrap: break-word

word-wrap

텍스트가 들어가는 요소의 크기에 따라 줄바꿈 제어!
영어에서만 작동

1. word-wrap: normal;

• 줄바꿈을 하지 않고 계속 한 줄로 표시

2. word-wrap: break-word;

• 글자 기준으로 강제 줄바꿈
  word-break: break-all;
  과 같은 결과

text-overflow

긴 문자열을 자르는 형태를 지정!

1. text-overflow: clip;

• 넘치는 글자를 자름

2. text-overflow: ellipsis;

• 잘라지는 끝부분에 자동으로 '...'을 넣음

참고

https://hohoya33.tistory.com/48
https://www.daleseo.com/css-white-space/
https://www.codingfactory.net/10658
https://nuhends.tistory.com/7
https://devjhs.tistory.com/602