줄바꿈이 안되는 경우 CSS : white-space, word-break

1. white-space

줄 바꿈, 자동 줄 바꿈, 스페이스, 공백 부분 등에 관한 처리 속성입니다.

 

ⓐ white-space: normal;

normal은 white-space의 기본값이며 여러 칸의 공백 또는 줄바꿈 모두 공백 1칸으로 인식합니다. 지정된 넓이의 끝에서 자동으로 줄바꿈을 합니다.

<table style="white-space: nomal; border-collapse: collapse; width: 59.4188%; height: 112px;" border="1" data-ke-style="style12">
<tbody>
<tr>
<td style="width: 100%;"><br />소쩍새는올빼미목 올빼미과의 한 종으로, 한국에서는 여름철새이다. <br />몸 길이는 20cm 정도로, 대체로 갈색을 띠며, 귀가 드러나 있다. 산이나 숲에 서식하며, 야행성이다.</td>
</tr>
</tbody>
</table>

 

ⓑ white-space: pre;

띄어쓰기를 여러칸 하면 한만큼 그대로 여러칸 공백이 나타나고, 줄 바꿈도 엔터키가 있는 부분만 줄 바꿈이 되며 자동줄 바꿈은 하지 않습니다. 따라서 정해진 규격을 오버하더라도 엔터가 없는 한 줄바꿈하지 않고 계속 이어집니다.

 

<table style="white-space: pre; border-collapse: collapse; width: 59.4188%; height: 112px;" border="1" data-ke-style="style12">
<tbody>
<tr>
<td style="width: 100%;"><br />소쩍새는올빼미목 올빼미과의 한 종으로, 한국에서는 여름철새이다. <br />몸 길이는 20cm 정도로, 대체로 갈색을 띠며, 귀가 드러나 있다. 산이나 숲에 서식하며, 야행성이다.</td>
</tr>
</tbody>
</table>

 

ⓒ white-space: nowrap;

스페이스, 탭, 줄 바꿈은 nomal과 동일(스페이스 여러칸은 한칸으로 병합)하지만, 자동 줄바꿈은 normal과는 다르게 영역을 벗어나도라도 자동 줄 바꿈 하지 않습니다.

 

<table style="white-space: nowrap; border-collapse: collapse; width: 59.4188%; height: 112px;" border="1" data-ke-style="style12">
<tbody>
<tr>
<td style="width: 100%;"><br />소쩍새는올빼미목 올빼미과의 한 종으로, 한국에서는 여름철새이다. <br />몸 길이는 20cm 정도로, 대체로 갈색을 띠며, 귀가 드러나 있다. 산이나 숲에 서식하며, 야행성이다.</td>
</tr>
</tbody>
</table>

 

 

ⓓ 이밖에 스페이스와 줄 바꿈을 그대로 보존하고 자동 줄 바꿈을 하는 pre-wrap, 스페이스 여러칸은 한칸으로 병합하고 줄바꿈과 자동줄바꿈을 모두 수행하는 pre-line이 있습니다.

 

 

2. word-break

텍스트가 들어가는 블록 요소에서 단어 단위로 줄 바꿈 할지, 글자 단위로 줄 바꿈 할지를 정하는 속성입니다.

 

ⓐ word-break: normal;

word-break의 기본값으로 한글은 글자 단위로, 영어는 단어 단위로 줄 바꿈 합니다. 우측 공간이 듬성듬성 비게 될 수 있습니다. 

 

ⓑ word-break: break-all;

한글, 영문 모두 글자 단위의 줄바꿈을 합니다. 반응형 웹디자인을 고려할 때 가로길이의 줄 바꿈과 미관상 한글에 가장 적합한 속성입니다.

 

ⓒ word-break: keep-all;

한글, 영문 모두 단어 기준으로 줄 바꿈 합니다. 한글 단독으로 있어도 단어기준으로 줄바꿈합니다.