강제로 줄바꿈(특수문자제외) style="word-break:break-all"
강제로 줄바꿈(특수문자포함) style="word-wrap:break-word"
줄바꿈 못하도록 nowrap


영문, 한글 한줄로 나오는 것 강제 줄바꿈 : word-wrap:break-word;word-break:break-all


한글일때는 width정해진대로 자동 줄바꿈이 되지만
영어나 숫자를 치면 셀이 늘어나는 결과가 나오는데
->강제로 줄바꿈을 방지해주는 방법은?
<table width="200" border="1" >
<tr>
<td style="word-break:break-all">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</td>
</tr>

<tr>
<td>두번째셀</td>
</tr>
</table>


width대로 자동줄바꿈이 되기를 원치않고
글자수대로 한줄에 표현되기를 원할때
<table width="200" border="1" >
<tr>
<td nowrap>첫번째 내용을 길게 입력하면줄이 바뀌지 않는다</td>
</tr>

<tr>
<td>두번째셀</td>
</tr>
</table>







word-break:normal;


wb_normal.gif?type=w2

너비 270픽셀, 패딩 10픽셀로 설정된 박스예요.

normal(기본값)을 주니 단어 단위로 줄바꿈이 되는 바람에 박스 오른쪽에 공간이 비어 있네요.


word-break:break-all;


wb_breakall.gif?type=w2


break-all은 글자 하나하나를 깨서(?) 글자 단위로 줄바꿈이 가능하게 만들어 주는 명령어예요.

알파벳 한 글자 단위로 줄바꿈이 되니까 글자가 화면에 가득 차게 되네요.


그 밖에도 이런 것들이 있어요.


word-break:break-word;


단어 단위로 줄바꿈을 시켜 주는 명령어.

근데 디폴트가 단어 단위니까 제 예문으로는 기본값이랑 똑같은 결과가 나왔어요.


word-break:nowrap;


wb_nowrap.gif?type=w2


너비 지정을 무시하고 줄바꿈 없이 무조건 한 행으로 표시해 주는 명령어.

근데 단어 사이가 이미 띄어져 있을 때는 무시하고 단어 단위로 줄바꿈을 해 주는 것 같았구요,

띄어쓰기 없이 긴 단어의 경우에는 박스 밖으로 삐져나가면서 한 행으로 표시돼요.


word-wrap:break-word;


w_wrap.gif?type=w2


이건 생긴 걸로 봐서는 word-break:break-word;랑 같아 보이죠?

아마 같은 효과인 것 같아요;;(으음;;;;)


그리고 공백 줄바꿈을 제어하는 white-space라는 태그도 있었어요.

티스토리 스킨 정리하다가 처음 보고, 이게 뭔지 궁금해서 찾아보았어요.


white-space:normal;


ws_normal.gif?type=w2


normal은 기본값.

사실 이 부분의 텍스트는 이렇답니다.


동해물과 백두산이  마르고   닳도록    하느님이     보우하사

우리나라만세


기본값은 html의 원래 속성대로 여러 칸의 공백을 1칸으로 인식해요.

그리고 엔터 줄바꿈도 공백 1칸으로 인식.

더불어 지정된 너비의 끝에서는 자동으로 줄바꿈이 일어납니다.


white-space:pre;


ws_pre.gif?type=w2


pre는 <pre> 태그의 속성대로예요.

띄어쓰기는 실제 입력한 칸 수대로, 줄바꿈도 엔터를 친 대로.

대신 넘어가는 부분에서 강제 줄바꿈은 되지 않네요.


white-space:nowrap;


ws_nowrap.gif?type=w2


nowrap은 아예 공백의 줄바꿈을 불허하는 태그.

보시다시피 1행에 모두 표시됩니다.