[pub] css 영문, 텍스트 줄바꿈 오류

[pub_cl] css 영문, 텍스트 줄바꿈 오류

프로젝트, 이벤트 페이지 댓글창 영문 입력시 줄바꿈이 되지 않고 엘리먼트 박스 밖으로 텍스트가 나가는 현상 발생.

밑의 블로그를 참고하여 해결

selector{

word-break:break-all

}

=======================================================================

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 - 영문,숫자, 특수문자 띄어쓰기 없이 한줄로 썼을 경우 줄바꿈 됨, 영문 단어 단위로 줄바꿈 됨, 한글 강제 줄바꿈 됨.

원본 출처:

test