목차
- 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
- 상속여부: O
- 애니효과: X
- CSS버전: CSS1
- JS구문 : object.style.whiteSpace="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>
결과보기
