[CSS] White-space

✍ white-space

: 요소가 공백을 지정하는 속성

 

normal : white-space의 기본 값으로 화면에서 보여지는 영역만큼 줄바꿈을 하게 된다. 

nowrap : <p>의 내용이 화면을 넘어가도(뷰 포트보다 문장의 길이가 짧으니) 감싸지 않겠다.는 의미로 화면을 벗어나면 가로 스크롤이 생기며 한 화면에서 보이지 않게 된다. 

<wbr>을 함께 쓰면 한 문장 단위로 줄 바꿈 시행 (영어 기준, 한글은 한 글자씩)=> 반응형 디자인할때 쓰인다. 

 

 

 

단어 안에서 줄이 바뀌기를 원하는 경우 overflow-wrap, word-break, hyphens를 사용하세요.

word-break : keep-all

➡ 단어 단위로 묶는다. 

 

 

https://developer.mozilla.org/ko/docs/Web/CSS/white-space

white-space - CSS: Cascading Style Sheets | MDN

 

mdn이 가장 정확한 사이트로 mozilla 재단에서 운영한다.