📄 줄바꿈과 관련된 속성들

■ white-space

줄바꿈, 자동 줄바꿈, 공백에 관한 속성

 

💡 white-space: normal;

white-space의 default 값이다.

여러 칸의 공백 또는 줄바꿈을 모두 공백 1칸으로 인식한다.

지정된 넓이를 넘어서면 자동으로 줄바꿈을 해준다.

💡 white-space: pre;

띄어쓰기를 여러 칸 하면 그만큼 그대로 여러 칸 공백이 출력된다.

줄바꿈은 엔터 키가 있는 부분만 줄바꿈을 하고, 자동 줄바꿈은 하지 않는다.

즉, 정해진 규격을 넘어서더라도 엔터가 없는 한 줄바꿈하지 않고 계속 이어진다.

💡 white-space: nowrap;

스페이스, 탭, 줄바꿈 전부 normal과 동일하게 동작하지만(여러 칸을 한 칸으로 병합하여 인식),

normal과 달리 내용이 정해진 영역을 넘어서더라도 자동 줄바꿈은 하지 않는다.

💡 pre-wrap: 스페이스와 줄바꿈을 보존, 자동 줄바꿈 수행

💡 pre-line: 스페이스 여러 칸을 한 칸으로 병합 인식, 줄바꿈은 보존, 자동 줄바꿈 수행

 

■ word-break

텍스트가 들어가는 블록 요소에서 단어 단위로 줄바꿈할지, 글자 단위로 줄바꿈할지를 결정하는 속성

 

💡 word-break: normal;

word-break의 default값이다. 

한글은 글자 단위로, 영문은 단어 단위로 줄바꿈한다.

 

💡 word-break: break-all;

한글, 영문 모두 글자 단위로 줄바꿈한다.

 

💡 word-break: keep-all;

한글, 영문 모두 단어 단위로 줄바꿈한다.

■ line-break

한중일 3개국어의 텍스트 줄을 어디서 줄바꿈할지 결정하는 속성.

아래의 이미지와 같은 차이점이 있다고 한다.

auto는 브라우저별 기본 줄바꿈 규칙을 적용하는 거란다.

normal은 가장 일반적인 줄바꿈 규칙, strict는 가장 엄격한 줄바꿈 규칙.

loose는 가장 자유로운 줄바꿈 규칙. 신문이나 뉴스 등에서 사용한단다.

솔직히 뭐가 뭔지 잘 모르겠다. 

일단은 '요런 속성이 있다' 정도만 알아두는걸로.