웹퍼블리싱중 줄이 바뀌는 구간에 단어가 끈겨 어색한 문장이 생기는데 이때 유용하게 사용할 수 있는 자동줄바꿈에 대해서 알아보겠습니다.
자동줄바꿈 속성에는 white-space, word-break, word-wrap, text-overflow가 있습니다.
white-space
띄어쓰기나 줄바꿈, 탭으로 인한 공백 등의 공백문자를 처리하는 방법 설정
white-space:normal;
/*white-space 기본값으로 연속 공백과 줄바꿈 등을 통합해서 표현*/
/*보통 띄어쓰기와 줄바꿈을 몇번 하든지 결과는 띄어쓰기 한칸 인것처럼 적용*/
white-space:pre;
/*normal과 반대로 원문 그대로 출력*/
white-space:nowrap;
/*공백은 nomal, 줄바꿈은 pre*/
white-space:inherit;
/*부모요소의 값을 상속*/word-break
텍스트가 들어가는 블록요소의 가로 사이즈에 맞춰 줄을 바꿈 강제줄바꿈 방지하고 텍스트 길이제한
word-break:normal;
/*word-break의 기본값으로 단어 단위로 끊어서 줄바꿈*/
word-break:break-all;
/*특수문자를 제외하고 강제로 줄바꿈*/
word-break:break-word;
/*특수문자를 포함하고 강제 줄바꿈*/
word-break:nowrap;
/*줄바꿈 하지 않음*/
word-break:keep-all;
/*한글일 경우 띄어쓰기 기준으로 짤림*/
/*아시아 언어만 지원 (한글, 중국어, 일본어)*/
/*ie, 파이어폭스 3.5 이상 지원*/word-wrap
텍스트가 들어가는 블록 요소의 사이즈에 따라 줄바꿈 해주는 코드
word-wrap: nomal;
/*word-wrap의 기본값으로 자르지 않음*/
word-wrap: break-word;
/*가로사이즈나 엘리먼트에 맞춰서 강제 줄바꿈 해줌*/
/*word-break:break-all; 과 같은 결과물*/
/*모든 브라우저 적용 가능*/text-overflow
긴 문자열을 잘라주는 형태를 지정
text-overflow:clip;
/*엘리먼트의 테두리에 맞춰서 글자를 자름*/
text-overflow:ellipsis;
/*잘라지는 끝부분에 자동으로 '...'을 넣어줌*/
/*ie6 이상에서만 지원 가능, 파이어폭스는 안됨*/
/*width 값이 지정되어야 하고 높이를 정해주거나 white-space-nowrap; 속성 사용해야 함*/
/*CSS의 white-space와 word-break를 함께 써야한다.*/퍼블리싱 상황에 맞게 속성값을 넣어주면됩니다.
