목차
white-space 예제 - 텍스트 (공백처리・줄바꿈) white-space 정의 white-space 구문 white-space 예제 - 문자열 자르기 ★
white-space 예제 - 텍스트 (공백처리・줄바꿈)
<style> p {width:250px; background-color:yellow;}
.normal { white-space:normal ;}
.nowrap { white-space:nowrap ;}
.pre { white-space:pre ;}
.preline { white-space:pre-line ;}
.prewrap { white-space:pre-wrap ;}
</style>
<h2>white-space 속성값 홈짱닷컴 (homzzang.com)</h2> <p class="normal ">normal 간격 예제 홈짱닷컴 (homzzang.com)</p>
<p class="nowrap ">nowrap 간격 예제 홈짱닷컴 (homzzang.com)</p> <p class="pre ">pre 간격 예제 홈짱닷컴 (homzzang.com)</p> <p class="preline ">pre-line 간격 예제 홈짱닷컴 (homzzang.com)</p> <p class="prewrap ">pre-wrap 간격 예제 홈짱닷컴 (homzzang.com)</p>
※ 위 결과보기는 실제와 좀 달라보이니, 첨부파일 다운받아 확인 !
white-space 정의
텍스트 공백처리와 줄바꿈 여부 지정.
1.
기본값: normal
상속여부:
애니효과:
CSS버전:
JS구문 : object .stylewhiteSpace ="nowrap"
2. cf.
3.
모든 주요브라우저 지원.
4.
MDN white-space 예제 더 보기https://developer.mozilla.org/ko/docs/Web/CSS/white-space
white-space 구문
selector { white-space: 속성값; }
[속성값]
normal ★ 연속된 라인공백 합침, 연속된 단어간 공백 보전 X, 자동 줄바꿈 O (기본값)
즉, 연속된 모든 공백을 하나로 통합 후, 자동 줄바꿈 출력.
nowrap ★
연속된 라인공백 보전 X, 연속된 단어간 공백 보전 X, 자동 줄바꿈 X
즉, 연속된 모든 공백을 하나로 통합 후, 가로 한 줄로 출력.
pre 연속된 라인공백 보전 O, 연속된 단어간 공백 보전 O, 자동 줄바꿈 X 입력된 공백과 줄바꿈 상태 보전. (※ <pre> 태그와 유사) pre-line
연속된 라인공백 보전 O, 연속된 단어간 공백 보전 X, 자동 줄바꿈 O
즉, 라인 공백만 보전한 채, 줄바꿈 시켜 출력.
CSS2, 브라우저에 따라 지원 여부 다름
pre-wrap
연속된 라인공백 보전 O, 연속된 단어간 공백 보전 O, 자동 줄바꿈 O
즉, 모든 공백 보전한 채로, 자동 줄바꿈 출력.
CSS2, 브라우저에 따라 지원 여부 다름
initial
이 속성의 기본값으로 설정.
inherit
부모요소 속성값 상속
PS.
wrap : 자동줄바꿈 (= 행갈이)
pre : 공백 보전 (preserve)
단어 안 줄바꾸기 - overflow-wrap, word-break, hyphens 사용
white-space 예제 - 문자열 자르기 ★
한 줄 넘는 긴 글의 길이 줄이고 말줄임표 붙밈 (※ 한 줄로 만들 때만 사용)
display:block; /* 블럭요소 로 설정 */
width:OOpx; /* 너비 지정 */
white-space: nowrap; /* 줄바꿈 방지 */
overflow: hidden; /* 너비 넘으면 숨기기 */
text-overflow: ellipsis; /* 너비 넘으면 ... 붙이기 */
[예제]
<style>
div {display:block; width:150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
</style>
<div>홈짱닷컴 Homzzang.com</div>
결과보기
