[CSS] 텍스트 줄바꿈 명령어 word-break, white-space

필요할 때마다 찾아 써서 제대로 모르고 있었던 건데,

막상 정리해 두려고 이것저것 시험해 보니 뜻대로 출력되어 주질 않네요.

역시 사람은 야매로 공부하면 안 돼..ㅠㅜ

어쨌든 정리된 내용 메모.

 

word-break:normal;

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

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

 

word-break:break-all; 

 

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

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

 

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

 

word-break:break-word;

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

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

 

word-break:nowrap;

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

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

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

 

word-wrap:break-word;

 

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

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

 

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

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

 

white-space:normal;

 

normal은 기본값.

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

 

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

우리나라만세

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

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

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

 

white-space:pre;

 

 

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

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

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

 

white-space:nowrap;

 

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

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

 

나 제대로 정리한 거 맞나 ㄱ-