CSS white-space 공백 처리 방법 정하는 속성 배우기

게시판 리스트 화면에서 

타이트을 만들때 타이틀 내용이 길어 곤란할때 ... 처럼 보이거나 할때 사용한다.

 

white-space는 스페이스와 탭, 줄바꿈, 자동줄바꿈을 어떻게 처리할지 정하는 속성이다

 

우선 white-space의 옵션값은 아래와 같다.

white-space: normal | nowrap | pre | pre-wrap | pre-line | initial | inherit

 

 

• normal, nowrap, pre, pre-wrap, pre-line : 아래 표 참고
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

	스페이스와 탭1	줄바꿈2	자동 줄바꿈3
normal	병합	병합	O
nowrap	병합	병합	X
pre	보존	보존	X
pre-wrap	보존	보존	O
pre-line	병합	보존	O

1. 연속된 스페이스와 탭의 처리 방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것입니다.
2. 줄바꿈의 처리방법입니다. 병합은 1개의 공백으로 바꾸는 것이고, 보존은 입력된 그대로 출력하는 것입니다.
3. 내용이 영역의 크기를 벗어날 때 처리방법입니다. O는 자동으로 줄바꿈하여 영역 내에 내용을 표시하는 것이고, X는 영역을 벗어나더라도 입력된 대로 출력하는 것입니다.

정리가 잘되있어서 좋은글이 있어 퍼왔다.

표만으로도 충분히 알 수 있다.