[css] 넘쳐 흐르는 텍스트 처리 주요 속성 정리

overflow

자식이 부모의 범위를 벗어날 경우 어떻게 할 것인지 제어하는 css

overlfow: visible | hidden | scroll | auto

• visible : 그냥 그대로 둔다. 넘치면 넘치는 대로 존재한다.
• hidden : 넘친 부분은 보이지 않는다.
• scroll : 스크롤이 생긴다. (가로 / 세로 모두 생긴다.)
• auto : 넘친 경우, 자동으로 스크롤이 생긴다.

text-overflow

넘치는 텍스트 표기를 제어하는 css

text-overflow: clip | ellipsis;

text-overflow 속성은 overflow 속성이 hidden / scroll / auto 이면서 white-space: nowrap일 경우만 적용된다.

• clip : 넘치는 텍스트를 자른다.
• ellipsis : 말 줄임표로 잘린 텍스트가 있다고 표시한다.

white-space

white-space: normal | nowrap

기본값은 normal 이다. normal 로 설정되면, 연속한 띄어쓰기, 들여쓰기, 그리고 줄바꿈 문자가 모두 무시된다. 또한, 텍스트가 길어 부모 요소의 가로 폭을 넘어가면 자동으로 줄바꿈을 해준다. 따라서 수동으로 줄바꿈을 할 수 있는 방법이 없다. (  같은 HTML 엔티티 편법을 사용해야 함)

nowrap : 가로폭을 넘어가도 줄바꿈이 일어나지 않는다. 다만, 그 외에는 모두 normal 과 동일하다. 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자를 모두 무시한다.

pre : 텍스트에 포함된 연속된 띄어쓰기, 들여쓰기, 줄바꿈과 같은 공백 문자들을 HTML 안에 그대로 보여지게 하는 옵션.

pre-wrap : pre 와 동일하지만, 긴 행이 있다면 자동으로 줄바꿈을 해준다.

pre-line : 줄바꿈만 유지하면서 연속된 띄어쓰기와 들여쓰기를 무시하고 싶을 때 사용

자주 사용되는 조합

• 텍스트가 빠져나가는 경우 말줄임 기호 보여주기

white-space: nowrap;
overflow: hidden;
text-overflow: elipsis;

• 가로 스크롤바를 사용할 수 있게 해주기

white-space: nowrap;
overflow: auto;