CSS 말줄임 처리 3줄 코드로 끝내기! 한 줄 두 줄 말줄임까지 완벽 정리

 

누가 텍스트를 저렇게 잘라놨어요?

말줄임표를 사용하지 않아서 텍스트가 잘못 잘린 예시

 

웹페이지 작업을 하다 보면 이런 적 있으시죠.
“텍스트가 너무 길어서 줄이 밀려버리네…”
“자동으로 말줄임표(…) 되게 하고 싶은데 방법이 생각이 안 나…”

특히 디자인을 해도 해도 안 예쁜 이유 중 하나가 이 "텍스트 넘침" 문제거든요.
어설픈 말줄임 처리는 오히려 사용자의 신뢰를 떨어뜨릴 수도 있어요.
그런데, 이거 단 3줄로 해결된다는 거… 알고 계셨나요?

오늘은 CSS 말줄임 처리에 대해 개발자와 디자이너 모두를 위한 실전 가이드를 드릴게요.
누구나 바로 써먹을 수 있고, 구글에 검색해 들어온 사람들도 광고 클릭 유도 가능한 황금 콘텐츠입니다.

 

핵심 요약: CSS 한 줄 말줄임 처리법

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

이 3줄이 바로 말줄임표의 핵심입니다.
이 조합은 웹개발자라면 반드시 외워야 할 필수 패턴이에요.

각 속성의 의미:
- overflow: hidden; → 넘친 텍스트를 숨겨요.
- white-space: nowrap; → 줄바꿈을 막고 한 줄에 다 나오게 해요.
- text-overflow: ellipsis; → 넘치면 자동으로 … 말줄임 표시를 넣어요.

 

다 줄이면 예쁜가요? UX를 먼저 생각하세요

말줄임 처리는 겉으로 보기에 깔끔하지만, 사용자 입장에서 정보를 잃는 것이기도 해요.
예를 들어 상품명을 볼 때,

“삼성전자 갤럭시S24 울트라 …”

이렇게 되면 어떤 모델인지 알기 어렵죠.
그래서 실무에서는 툴팁, 클릭 시 전체 보기, 더보기 버튼 같은 UI도 함께 고려해요.

예시) 더보기 구현 방식

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
}

<div class="ellipsis" title="전체 텍스트가 여기에 들어갑니다.">
  전체 텍스트가 여기에 들어갑니다.
</div>

title 속성을 활용하면 마우스를 올렸을 때 전체 텍스트를 볼 수 있어요.
간단하지만 사용자에게는 큰 차이를 만들어주는 배려죠.

 

마우스를 올릴 경우 보여지는 전체텍스트

 

두 줄 이상 말줄임도 가능할까?

네, 가능합니다. 하지만 조금 더 복잡해져요.

.multi-ellipsis {
  display: -webkit-box;
  -webkit-line-clamp: 2;  
  -webkit-box-orient: vertical;
  overflow: hidden;
}

위 코드는 2줄까지만 보여주고 나머지는 … 처리해주는 방법입니다.
단점은 IE에서는 작동하지 않고, 웹킷 기반 브라우저(크롬, 사파리 등)에서만 가능하다는 점이에요.

 

2줄까지 보여지는 말줄임

 

"말줄임은 미학입니다"

CSS 말줄임 처리는 단순히 텍스트를 잘라내는 기술이 아니라
정보 전달과 디자인의 균형을 맞추는 섬세한 작업이에요.

오늘 배운 3줄짜리 코드와, 두 줄 말줄임, 그리고 UX까지 고려한 실전 팁을 잘 기억해두세요.
블로그든 회사 웹사이트든, 깔끔한 UI가 사용자의 신뢰를 만들고,
결국엔 여러분의 성과와 수익을 끌어올리는 기반이 됩니다.

---

📚 관련 콘텐츠 추천

반응형 웹사이트 만들기 기초부터 실전까지! 초보도 가능한 쉬운 방법