테이블 크기 유지 고정
1. word-break:break-all
2. word-wrap:break-word
하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 하나하나를 단위로 끊어주는 역할을 하는 스타일 속성.
기본적으로 안에서 문장은 띄어쓰기 공백을 기준으로 잘리기 때문에 width크기를 지정해 주더라도 width 크기를 무시하고 늘어나게 됩니다.
이런 경우, 문자 단위로 끊어주면 자동으로 width에 맞춰 줄바꿈이 됩니다.
차이점...
# 강제로 줄바꿈(특수문자제외) style="word-break:break-all"
# 강제로 줄바꿈(특수문자포함) style="word-wrap:break-word"
3. word-break:nowrap;
반대의 경우도 있습니다. 특정한 경우에 셀의 너비를 지정했다 하더라도 줄바꿈하지 않았으면.. 할 때 사용하는 속성입니다.
하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 하나하나를 단위로 끊어주는 역할을 하는 스타일 속성.
기본적으로 안에서 문장은 띄어쓰기 공백을 기준으로 잘리기 때문에 width크기를 지정해 주더라도 width 크기를 무시하고 늘어나게 됩니다.이런 경우, 문자 단위로 끊어주면 자동으로 width에 맞춰 줄바꿈이 됩니다.
테이블 사이즈를 정해주더라도 테이블이 강제로 늘어나 자동 줄바꿈이 되지 않는 경우도 있다.
그럴땐 테이블 사이즈를 고정 시켜주면됨
영어는 띄워쓰기 기준으로 개행되지만 한글은 되지 않는데, 이때 아래와 같은 태그를 사용하면 됩니다.
word-break:keep-all
일단,
적용 차이를 비교하기 위해 table 의 td 태그에 위 스타일을 적용해보았습니다.
Netscape 및 FireFox의 경우는 적용되지 않습니다. 이를 위해 overflow:hidden을 사용하면, 가로크기의 한도를 넘어서는 내용은 보여주지 않도록 하여 박스레이아웃을 유지할 수 있습니다. (주, IE의 경우는 word-break 속성에 의해 줄바꿈이 되기 때문에 문제가 없으나, FireFox의 경우, 레이아웃은 유지하나 내용을 볼 수 없게 됩니다.)
* CSS word-break
non-standard는 아니고 / W3C HTML Validation 통과되는 속성 입니다.
* CSS3 Draft
http://www.w3.org/TR/2005/WD-css3-text-20050627/#word-break
https://bugzilla.mozilla.org/show_bug.cgi?id=249159
div {
width:300px;border:1px solid red;
word-break:break-all;
}
p {
width:300px;border:1px solid red;
word-wrap:break-word;
}
.wordBreak {
font-size:0;
line-height:0;
}
//
…
