메뉴 건너뛰기

도움말

[CSS] white-Space, word-break, word-wrap, text-overflow

white-Space 
공백문자를 어떻게 할 것인지 설정.
(띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등) 
 
white-space:normal;
기본값. 연속 공백과 줄바꿈 등을 통합해서 표현 
(보통 띄어쓰기를 500번 하든지 줄바꿈을 하든지 결과는 띄어쓰기 한칸 인것처럼 적용됨)
 
white-space:pre;
normal과 반대. 원문 그대로 출력
 
white-space:nowrap;
스페이스바를 막 눌러서 들어가는 연속공백은 통합되지만 (normal의 효과)
줄바꿈은 인정함 (pre의 효과)
 
white-space:inherit;
부모요소의 값을 상속
 
 
word-break
텍스트가 들어가는 블록요소의 가로 사이즈에 맞춰 줄바꿈 설정.  
강제줄바꿈 방지, 텍스트 길이제한 
 
word-break:normal;
기본값. 단어 단위로 끊어서 줄바꿈
 
word-break:break-all;
특수문자를 제외하고 강제로 줄바꿈 
 
word-break:break-word;
특수문자를 포함하고 강제 줄바꿈 
 
word-break:nowrap; 
줄바꿈 하지 않음 

word-break:keep-all; 
한글일 경우 띄어쓰기 기준으로 짤림
ie 계열 / 아시아 언어만 지원 (한글, 중국어, 일본어)

파폭 3.5 이상에서는 지원.
 
 
word-wrap
텍스트가 들어가는 블록 요소의 사이즈에 따라 줄바꿈 해주는 코드.
 
word-wrap: break-word;
가로사이즈나 엘리먼트에 맞춰서 강제 줄바꿈 해준다. word-break:break-all; 과 같은 결과물
모든 브라우저 적용 가능
 
 
 
text-overflow
긴 문자열을 잘라주는 형태를 지정
 
text-overflow:clip;
엘리먼트의 테두리에 맞춰서 글자를 자른다.
 
text-overflow:ellipsis;
잘라지는 끝부분에 자동으로 '...'을 넣어준다.
ie6 이상에서만 지원 가능, 파폭은 안됨
width 값이 지정되어야 함 / 높이를 정해주거나 white-space-nowrap; 속성 사용해야 함. / <nobr> 사용
 


div에 글을 써넣으면 '\n'이 먹히지 않는다. 그리고 같은 글자가 반복되어서 나오면("+++++++++..." 같은것)
div영역을 뚫고 나가버린다. 이를 해결하기 위해서 CSS의 white-space와 word-break를 써야한다.

white-space
줄바꿈 해주는 property로 normal, nowrap, pre, pre-line, pre-wrap이 있다.

normal은 보통의 경우로 옵션을 주지 않아도 된다.
nowrap은 줄바꿈을 하지 않는다.(div를 뚫고 나간다.)
pre는 html의 <pre>태그처럼 내부의 태그를 실행시켜주지만 이역시 줄바꿈은 하지 않는다.
pre-line은 normal + pre. 줄바꿈도 해주고 태그도 실행한다.
pre-wrap는 pre-line과 비슷 하지만 pre-line은 연속되는 공간("     ")을 한칸으로 압축하지만
             pre-wrap는 압축하지 않고 그대로 보여준다.

word-break
한단어가 길게 이어질때 자동으로 잘라주는 property이다.

normal은 자르지 않는다.
break-all은 영역을 넘어가면 무조건 자른다.
hyphenate는 영역을 넘어가더라도 단어를 유지해준다.
keep-all은 한글일 경우 띄어쓰기 기준으로 자른다.(only IE)
현재 word-break는 5대 브라우저중 FF와 Opera만 지원하지 않는다.

word-wrap
normal은 자르지 않는다.
break-word는 단어단위로 자른다.

(CSS3를 지원하는) 모든 브라우저에서 단어별로 줄바꿈하고 반복되는 단어를 자르려면(한글 제외)
white-space: pre-wrap;
word-wrap: break-word;
옵션을 추가하면 된다.


List of Articles
번호 제목 - 글쓴이 조회 수sort
267 [동영상/Video] 실시간 방송 서비스 구축하기, Live Video Streaming 동영상 master 70330
266 [제로보드XE] 메뉴 제목 수정하기 제로보드XE master 58244
265 [제로보드XE] 홈페이지 아래에 있는 주소 및 전화번호 수정하기 제로보드XE master 50151
264 [유튜브/YouTube] 마지막에 나타나는 다른 동영상 목록 감추기 유튜브/Youtube master 48251
263 [프로그램/Program] Top 4 Free PDF Editors (무료 PDF 편집 프로그램) 프로그램 master 42719
262 [동영상/Video] 파일 및 코덱종류 1 동영상 master 36515
261 [구글웹마스터/GoogleWebmaster] 사이트 주소가 바뀐 경우 구글 검색 결과에서 수정하기 구글 웹 마스터 툴 master 32297
260 [아웃룩/Outlook] 서버 메일 자동 삭제하기 이메일 master 31530
» [CSS] white-Space, word-break, word-wrap, text-overflow CSS master 28763
258 [비밀번호 생성기/Password generator] 안전한 비밀번호 만들기 기타 master 28079
257 [윈도우 7/Windows 7] Create a system repair disc 윈도우 7 master 26664
256 [마젠토/Magento] 첫페이지 바꾸기 (상품 카테고리 페이지) 마젠토 master 26111
255 [유튜브/YouTube] 업로드 가능한 파일 형식(Format) 유튜브/Youtube master 25917
254 [동영상/Video] 프리미어 프로를 이용한 동영상 변환 압축 방법 (DVD, VCD, WMV 만들기) 동영상 master 24893
253 [구글웹마스터/GoogleWebmaster] 사이트맵 만들기 구글 웹 마스터 툴 master 24748
252 [마케팅/Marketing] Google Places (구글 지역서비스, 플레이스) 설정 마케팅 master 24209
251 [지메일/Gmail] 같은 제목 이메일을 한번에 삭제하기 이메일 master 23995
250 [파일전송프로토콜/FTP] 에디터 플러스 서버 연결하기 (홈페이지 소스 보기, 편집 프로그램) 기타 master 23596
249 [프로그램/Program] 나모웹에디터 8.0: HTML편집기 (Free) 프로그램 master 23485
248 [마케팅/Marketing] 이메일 마케팅 시스템 이메일 master 22750
©2002 GeneralHomepage.Com.All Rights Reserved