프로그램 공부 로그/HTML

CSS white-space

HyoungJunYoon 2020. 12. 2. 17:41

* 요소가 공백을 처리하는 법을 지정

 

1) normal : 연속 공백을 하나로 합침. 개행 문자도 다른 공백 문자와 동일하게 처리. 자동 줄바꿈

2) nowrap : 연속 공백을 하나로 합침. 줄 바꿈은 <br> 요소에서만 일어납니다.

3) pre : 연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서만 일어납니다.

4) pre-wrap : 연속 공백 유지. 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄 바꿈

5) pre-line : 연속 공백을 하나로 합침. 줄 바꿈은 개행 문자와 <br> 요소에서 일어나며, 한 줄이 너무 길어서 넘칠 경우 자동으로 줄 바꿈

6) break-spaces : 아래의 요소 외에는 pre-wrap과 동일

 - 연속 공백이 줄의 끝에 위치하더라도 공간을 차지합니다.

 - 연속 공백의 중간과 끝에서도 자동으로 줄을 바꿀 수 있습니다.

 - 유지한 연속 공백은 pre-wrap과 달리 요소 바깥으로 넘치지 않으며, 공간도 차지하므로 박스의 본질 크기에 영향을 줍니다.

 

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

 

white-space

CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정합니다.

developer.mozilla.org

 

'프로그램 공부 로그 > HTML' 카테고리의 다른 글

CSS 변수 사용  (0) 2020.12.11
flex  (0) 2020.12.09
메뉴 글씨 색상 변경 버전  (0) 2020.11.27
CSS 레이아웃잡기  (0) 2020.11.26
HTML 및 CSS 기본 속성  (0) 2020.11.23