[CSS] white-space - 공백/줄바꿈/개행 - 처리 방법 정하는 속성

white-space 구문

 

selector {white-space: 속성값;}

HTML 줄바꿈 안 될 때 CSS에서 지정

<span style="white-space: pre-wrap">@Model.CommentText</span>​

---

[속성값]

 

normal

연속된 라인공백 보전 X, 연속된 단어간 공백 보전 X, 자동 줄바꿈 O  (기본값)

즉, 연속된 모든 공백을 하나로 통합 후, 자동 줄바꿈 출력.

 

nowrap

연속된 라인공백 보전 X, 연속된 단어간 공백 보전 X, 자동 줄바꿈 X

 

즉, 연속된 모든 공백을 하나로 통합 후, 가로 한 줄로 출력.

튀어 나오는 문자는 overflow 속성을 이용해 처리 가능

pre
연속된 라인공백 보전 O, 연속된 단어간 공백 보전 O, 자동 줄바꿈 X
입력된 공백과 줄바꿈 상태 보전. (※ <pre> 태그와 유사)

튀어 나오는 문자는 overflow 속성을 이용해 처리 가능.
 

pre-line

연속된 라인공백 보전 O, 연속된 단어간 공백 보전 X, 자동 줄바꿈 O

즉, 라인 공백만 보전한 채, 줄바꿈 시켜 출력.

 

CSS2, 브라우저에 따라 지원 여부 다름

 

pre-wrap 

연속된 라인공백 보전 O, 연속된 단어간 공백 보전 O, 자동 줄바꿈 O

즉, 모든 공백 보전한 채로, 자동 줄바꿈 출력.

 

CSS2, 브라우저에 따라 지원 여부 다름

 

initial

이 속성의 기본값으로 설정.

 

inherit 

 

부모요소 속성값 상속

 

※ wrap : 자동줄바꿈 (= 행갈이)

※ pre : 공백 보전 (preserve)

https://www.codingfactory.net/wp-content/uploads/css-reference-white-space-01.png

 

출처 : https://www.codingfactory.net/10597

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

출처 : https://homzzang.com/b/css-89