css의 overflow와 text-overflow 활용해보기

css의 overflow를 써야할 때

컨텐츠가 블록 속성이 엘리먼트 박스를 넘을 때 overflow 속성을 어떻게 할 지 고민해야 합니다. 스크롤을 생기게 하거나 또는 엘리먼트 박스를 넘은 컨텐츠를 숨길 수 있고 상황에 맞게 필요한 것을 선택해야 합니다.

일단 너비와 높이가 길이가 정해져 있어야 overflow를 정할 일이 생기기 때문에 100px씩으로 고정했습니다. 해당 코드를 실행해보시면 아래와 같은 형태가 됩니다.

css overflow 속성 보기

왼쪽부터 visible, scroll, hidden의 값을 준 형태입니다. visible은 상자를 넘어서 나오게되고, 스크롤은 스크롤이 생기며, 히든은 최대한 표현하고 나머지는 숨기게 됩니다. 직관적으로 이해되시나요?

높이값을 주지 않으면 컨텐츠가 생성하는 높이가 증가함에 따라 엘리먼트 박스의 높이도 자동으로 증가하기 때문에 꼭 높이 값을 주셔야합니다.

css의 text-overflow를 써야할 때

위처럼 감싸고 있는 것보다 더 길어진 것을 다루는 css 속성은 text-overflow도 있습니다. 이 속성은 컨텐츠가 더 길어진 상태에서 컨텐츠를 어떻게 보일지를 정하는 속성입니다.

#c(아이디가 c인 엘리먼트)의 css만 바꿔보도록 하겠습니다. 코드를 실행하시면 아래와 같은 상황을 볼 수 있습니다.

text-overflow 속성

맨 마지막의 상자의 값에 ...이 추가된 것을 볼 수 있습니다. 이것은 ellipsis 값을 준 것입니다.  앞에서 컨텐츠가 길어진 상태에서 컨텐츠를 어떻게 보이는 지를 결정한다고 했었죠? 그래서 white-space와 overflow의 값이 필요합니다.

만약에 white-space의 값이 nowrap(여러줄 사용)이 아니라면 줄바꿈이 되면서 컨텐츠가 길어져도 엘리먼트 상자안에서 다 보여질 수 있기때문에 text-overflow 속성이 효과를 발휘하지 못합니다. 또 overflow가 hidden이 아니라면 또 컨텐츠를 다 표현할 수 있기 때문에 text-overflow는 필요없어지게 됩니다.

즉 text-overflow 효과를 적용하려면 white-space:nowrap; overflow: hidden; 값이 있어여 합니다.

기본적으로 많이 사용하는 값은 clip과 ellipsis입니다. ellipsis는 위에서 보여드린대로 작동하고 clip은 hidden처럼 표현됩니다.

보통 백엔드 언어의 경우에 템플릿을 보면 특정 글자 이상이 되면 ellipsis를 해주는 기능들이 있습니다. 보통은 글자수를 가져와서 처리해줍니다. css에 이와 비슷하게 ellipsis를 해주긴 하지만 이러한 기능이 있는 이유는 css의 text-overflow의 경우엔 아마 조건이 조금 복잡해서가 아닐까 라는 생각이 듭니다.