[짧은 CSS팁] 쩜쩜쩜(...) 만들기

반응형 CSS로 말줄임표 적용하기

유튜브 보다보면 제목이 길어질 때 나오는 쩜쩜쩜(...) 다른 말로 말 줄임표 만드는 법을 알려드리겠습니다.

말줄임표는 주로 4개의 CSS 명령이 필요합니다.

첫째로 width입니다. width는 대상 엘리먼트에 적용하거나 대상 부모 엘리먼트에 적용하면 됩니다.

둘째로 white-space입니다. 이건 공백 처리를 정할 때 사용합니다. 보시면 nowrap입니다. wrap은 감싸는 걸 뜻합니다. CSS에서는 wrap을 쓰면 텍스트나 콘텐츠, 엘리먼트 등을 감싸 여러줄 표기를 할 수 있게 만듭니다. 반면 nowrap은 wrap하지 않는다해서 1줄로 표기할 때 사용합니다.

셋째로 overflow. 영역을 넘어가는 콘텐츠를 어떻게 처리할지 정합니다. overflow: scroll;을 하면 스크롤바가 나타나고, hidden을 넣으면 넘어가는 부분에 대해 감춰짐 처리가 됩니다. 우리는 영역을 초과하는 텍스트를 감춰야 하니 hidden으로 설정합니다.

넷째로 text-overflow입니다. 말 그래도 텍스트가 오버플로우 된 경우 어떻게 표시할지 정합니다. ellipsis는 쩜쩜쩜(...)으로 처리하겠다는걸 뜻합니다.

이렇게 처리하면 말줄임표 기능은 완료일까요?

이렇게만 하면 유튜브에 나온 것처럼 2줄로 만들 수 없습니다. 자세히 보시면 유튜브는 한 줄이 아니라 제목을 2줄까지 허용하고 이후에 ...으로 표기했습니다. 제가 설명한 방법을 쓰면 오직 1줄만 가능합니다. 이를 해결하려면 어떻게 할까요?

이렇게 하면 됩니다.

white-space 제거 또는 normal 부여.

text-overflow 제거. (없어도 알아서 ...으로 처리됩니다.)

display: -webkit-box; (반드시 이것만 가능합니다.)

-webkit-line-clamp: 숫자; (텍스트를 몇 줄까지 표시할지 정합니다.)

-webkit-box-orient: vertical; (콘텐츠의 정렬 방향을 정합니다.)

이렇게 처리하면 자신이 원하는 줄까지 도달한 후 말줄임 처리가 됩니다.