텍스트 줄넘침 현상.

html 에서 div에 width값이 지정이 되어있더라도

 

텍스트에 띄어쓰기가 없으면 줄넘침 현상이 발생한다.

 

 

 

이렇게 나오는 녀석을 해결하려면.....

 

 

 

 

 

 

해결방법 1.

#box {width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

 

 

 

말줄임...으로 해결..;;

 

 

 

 

 

 

해결방법 2.

#box {width:100px;overflow:hidden;word-wrap:break-word;}

 

 

 

 

자동 줄바꿈으로 해결..;;

 

 

 

익스 7, 8, 9, 파폭, 크롬, 사파리, 오페라 확인;;

----------------------------------------------------

2015.07.07 내용 추가.

----------------------------------------------------

PC의 브라우저에서는 위와 같이 해주면 별 문제가 없었는데

휴대폰으로 모바일 사이트에 적용한 것을 확인할 때에 문제가 생겼다.

영문을 한줄로 길게 넣었을때 넘치는 현상이 발생.

word-break 라는 속성이 있더라.

옵션으로 break-all / keep-all 이 두가지가 있는듯.

문자가 1바이트일 경우에 이 속성이 잘 적용된다.

뭐 한글이던 영문이던 사용자가 뭘 어떻게 써넣을지 모르니

.class {word-wrap:break-word; word-break:break-all;}

이렇게 다 넣어주면 될 듯..!

----------------------------------------------------

2015.11.27 내용 추가.

----------------------------------------------------

두줄 이상 멀티라인의 말줄임 처리를 하고 싶은 경우가 있는데

이때에는 

.class {overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word;}

이렇게 넣어준다.

-webkit-line-clamp:2;

이 것이 몇줄로 표시할 것인가 하는 옵션..

근데 이게 웹킷엔진을 사용하지 않는 브라우저에서는 문제가 발생-_-한다.

line-height:1.2em;

height:3.6em;

이런식으로 높이값도 조절해줘야 한다.

line-height가 1.2em 이고 3줄에서 자를거면 높이값은 1.2em * 3 = 3.6em

뭐 이런 셈..;;

overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:break-word; word-break:break-all;