줄바꿈, 텍스트 끊기

word-break

• 문제 : 영문+숫자를 띄어쓰기 없이 길게 쓸 경우 줄바꿈이 되지 않는다.
• 해결 : word-break 사용

E { word-break : keyword ; }

E { word-break:break-all; } /* 특수문자를 제외하고 강제 줄바꿈 */
E { word-wrap:break-word; } /* 특수문자를 포함하고 강제 줄바꿈 */
E { word-break:nowrap; }    /* width를 지정했지만 개행이 되지 않기를 원할때 사용. */
E { word-break:keep-all; }  /* 텍스트가 한글일 경우 띄워쓰기 기준으로 개행된다. */

text-overflow

• 특정 블럭에서 텍스트를 잘라서 표출함.
• 기준 : width 값이 정해져 있어야 함.

E { text-overflow: keyword ; }

E { text-overflow:clip; }     /* 글자 중간이라도 잘라버림 (overflow:hidden과 비슷)  */
E { text-overflow:''; }       /* 글자 중간은 자르지 않고 글자 뒤에서 자름 */
E { text-overflow:ellipsis; } /* 글자 뒤를 자르고 '...'으로 보여줌 */
E { text-overflow:'.' }       /* 글자 뒤를 자르고 '.'으로 보여줌 (점말고 다른 것도 쓸 수 있음) */
 
/* 2개 값 사용 가능 (IE 미지원( */
E { text-overflow:clip clip; } /* 앞뒤로 자름 */
E { text-overflow:clip ellipsis; } /* 앞은 그냥 자르고 뒤를 '...'로 보여줌 */
E { text-overflow:',' ellipsis; } /* 기타 등등...  */