말줄임

정의

말줄임은 길이가 제각각인 텍스트를 정해진 줄 수에서 잘라 내고, 잘린 자리에 말줄임표(…)를 붙여 뒤에 내용이 더 있음을 알려 주는 처리입니다. 목록이나 카드에는 제목과 설명이 들어가는데, 실제 데이터는 어떤 것은 한 줄, 어떤 것은 다섯 줄로 길이가 들쭉날쭉합니다. 이때 각 항목을 최대 두 줄, 세 줄처럼 정해 두고 넘치는 부분을 잘라 내면, 모든 항목의 높이가 같아져 화면이 가지런해집니다. 한 줄만 자를 때와 여러 줄을 자를 때 쓰는 CSS가 서로 달라, 두 경우를 나눠서 기억해 두면 편합니다.

왜 중요한가

말줄임이 없으면 항목마다 텍스트 길이가 제각각이라 높이가 들쑥날쑥해지고, 카드가 서로 어긋나면서 격자가 무너져 보입니다. 특히 여러 개를 나란히 놓는 목록과 카드에서는 이 높이 차이가 곧바로 정렬 붕괴로 이어집니다. 줄 수를 고정해 두면 모든 항목이 같은 높이로 맞춰져, 눈이 편하게 훑어 내려갈 수 있는 안정된 리듬이 생깁니다. 또한 긴 문장을 통째로 보여 주는 대신 앞부분만 미리 보여 주면, 사용자가 전체를 클릭해 열지 말지 빠르게 판단할 수 있습니다. 화면 공간은 한정돼 있는데 넣어야 할 정보는 많은 모바일 환경에서는 이 절제가 특히 중요합니다. 즉 말줄임은 공간을 아끼는 기술이면서, 동시에 훑어보기 좋은 화면을 만드는 정렬 도구이기도 합니다.

흔한 실수

• 말줄임을 걸어 두고 원문을 아예 볼 방법을 주지 않는 경우입니다. 잘린 텍스트가 중요한 정보라면, 클릭해서 펼치거나 상세 화면으로 이동하는 등 전체를 확인할 길을 반드시 함께 마련해야 합니다. 특히 이름이나 주소처럼 끝까지 봐야 뜻이 통하는 값이 잘리면 곤란합니다.
• 한 줄 자름과 여러 줄 자름을 혼동하는 경우입니다. 한 줄은 text-overflow: ellipsis에 overflow와 white-space 설정이 함께 있어야 동작하고, 여러 줄은 -webkit-line-clamp를 써야 하는데, 이 조건들을 빠뜨리면 말줄임표가 나타나지 않습니다.
• 줄 수를 정해 놓고 정작 부모 요소의 높이는 고정하지 않는 경우입니다. 줄 수를 제한해도 컨테이너가 내용에 따라 늘어나면 정렬을 맞추려던 목적이 흐트러지므로, 최대 줄 수와 높이를 함께 관리해야 합니다.

실무 팁

• 카드와 목록에서 제목과 설명의 줄 수를 미리 정해 높이를 맞추면 정렬이 흐트러지지 않습니다. 한 줄만 자를 때는 text-overflow: ellipsis를, 여러 줄을 자를 때는 -webkit-line-clamp를 사용하세요.
• 잘린 텍스트에는 title 속성이나 툴팁으로 전체 내용을 확인할 수 있게 해 두세요. 특히 제목처럼 클릭 대상이 되는 요소는 원문을 놓치면 사용자가 무엇을 누르는지 알기 어렵습니다.
• 말줄임에만 기대지 말고 원문 길이 자체를 적당한 선에서 관리하세요. 자르기 전 텍스트가 지나치게 길면, 어떤 항목이든 앞부분이 비슷해 보여 구분이 되지 않을 수 있습니다.

관련 개념