white-sapce란?
white-space는 여백 공백을 뜻하며 요소 안에 공백 처리를 어떻게 할지 지정하는 속성이다.
white-space의 속성값
nomal
- 기본값
- 연속된 띄어쓰기, 들여쓰기, 줄바꿈 등과 같이 여러개의 공백을 사용해도 1개의 공백으로 표시된다.
- 텍스트가 길어지면 자동으로 줄바꿈이 된다.
nowrap
- 공백을 여러개 넣어도 1개의 공백으로 표시된다.
- 텍스트가 길어져서 부모 요소의 가로 폭을 넘어가더라도 자동으로 줄바꿈이 되지 않고 같은 줄에 계속 표시된다.
pre
- 텍스트에 포함된 연속된 띄어쓰기, 들여쓰기, 줄바꿈 등과 같은 공백 부분을 있는 html 문서와 같이 있는 그대로 보여주고 싶을 때 사용하는 속성이다.
- 보통 웹페이지에 있는 소스를 있는 그대로 보여주고 싶을 때 사용한다.
- <pre> 태그와 같은 기능을 한다.
- 텍스트가 길어지면 nowrap처럼 부모 요소 밖으로 넘어가게 된다.
prewrap
- pre 속성과 동일하게 연속된 띄어쓰기, 들여쓰기, 줄바꿈 등을 있는 그대로 보여준다.
- pre 속성과 한가지 다른점은 텍스트가 길어져 부모 요소를 넘어가게 되면 자동으로 줄바꿈을 해준다.
pre-line
- line 즉, 줄바꿈이 있는 것만 있는 그대로 나타내주고 그밖의 연속된 띄어쓰기, 들여쓰기는 모두 무시되어 1개의 공백으로 표시된다.
참고
https://www.daleseo.com/css-white-space/
https://aboooks.tistory.com/187
