텍스트 줄바꿈

CSS 2010.12.08 14:39


1번과 2번은 특수문자의 종류에 따라서 결과가 다를 수도 있으니 주의하세요~


 

1. 아무 처리도 하지 않았을 경우,
IE - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.
(단 특수문자의 종류에 따라서 줄바꿈이 되는 것도 있습니다. 예를 들어 %는 줄바꿈이 됩니다.)
 

FF - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.

 

2. word-break:break-all
IE - 숫자, 특수문자, 영문, 한글 모두 강제 줄바꿈됨
(단, 특수문자의 종류에 따라서 줄바꿈이 되지 않는 것도 있으니 주의해야함)
 

FF - 숫자/특수문자는 줄바꿈 안됨. 영문은 단어별로 줄바꿈 됨. 한글은 강제 줄바꿈 됨.

 

3. word-break:keep-all
IE – 영문,숫자,특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 안됨, 한글 단어 단위로 줄바꿈 됨.


FF – 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 안됨, 한글 강제 줄바꿈 됨.

 

4. word-wrap:break-word
IE - 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 됨. 영문 단어 단위로 줄바꿈됨. 한글 강제 줄바꿈 됨.


FF - 영문, 숫자, 특수문자 띄어쓰기 없이 썼을 경우 줄바꿈 됨. 영문 단어 단위로 줄바꿈됨. 한글 강제 줄바꿈 됨.

 

5. word-break:keep-all; word-wrap:break-word
IE – 영문,숫자, 특수문자 띄어쓰기 없이 한줄로 썼을 경우 줄바꿈 됨, 영문/한글 단어 단위로 줄바꿈 됨,
 

FF - 영문,숫자, 특수문자 띄어쓰기 없이 한줄로 썼을 경우 줄바꿈 됨, 영문 단어 단위로 줄바꿈 됨, 한글 강제 줄바꿈 됨.

원본 출처:
http://butygal.blog.me/50089735557

신고

'CSS' 카테고리의 다른 글

텍스트 줄바꿈 처리 word-break, white-space  (0) 2011.01.04
td 안에 div height:100% 만들기  (0) 2010.12.08
텍스트 줄바꿈  (1) 2010.12.08
a태그 점선 없애기  (0) 2010.10.25
font  (0) 2010.10.25
select 안에 이미지 넣기  (0) 2010.10.18
Trackback 0 : Comment 1

티스토리 툴바