[CSS] 말줄임표 처리하고 툴팁 구현까지 가보기

 

프론트엔드 개발을 하다보면 텍스트가 너무 길어질 경우에 말줄임표로 표현을 해주는 니즈를 맞춰야 하는 경우가 많다.

창피하지만 솔직히 어떻게 구현해야 하는지 떠오르지가 않았고, CSS 공부가 소홀했구나 싶은 생각이 들었다.

요즘은 간단한 퍼블리싱이야 AI가 너무 잘해주다 보니 (특히 Figma MCP) 점점 CSS 영역에 있어서 퇴화하는 느낌... 공부를 게을리 하지 않아야겠다.

오늘은 길어진 텍스트에 대하여 말줄임표로 표현하고, 말줄임표를 표현된 Text에 hover하면 Tooltip을 보여주는 코드를 만들어보자!

---

CSS 적용해보기

.ellipsis-tooltip {
  max-width: 200px;       // 말줄임 적용 영역 너비
  overflow: hidden;       // 넘친 텍스트 숨김
  white-space: nowrap;    // 줄바꿈 방지
  text-overflow: ellipsis; // 말줄임표 표시
  display: inline-block;  // width 적용 위해 inline-block
  vertical-align: middle; // 라인 정렬
}

 

CSS는 다음과 같다.

 

• white-space: nowrap; → 텍스트가 한 줄로만 표시
• overflow: hidden; → 영역 밖 텍스트 숨김
• text-overflow: ellipsis; → 잘린 부분 말줄임표 처리
• max-width or width 필수 (너비 지정 안 하면 잘리지 않음)

 

그리고, display가 flex로 설정되면 안 된다는 점을 주의해야 한다. 왜 안 될까?

바로 CSS 규칙이 충돌나기 때문이다! display: flex로 세팅해두었다고 가정하자. 그럼 다음과 같은 상황이 생긴다.

 

1. flex 컨테이너 안의 자식은 기본적으로 min-width: auto가 되는데
   이 상태에서는 텍스트가 잘리지 않고 부모 너비를 확장하려고 한다.

2. 그래서 overflow: hidden을 줘도 잘 안 잘리고 말줄임표가 안 생겨버린다!

---

자바스크립트를 곁들이기

나의 니즈는 말줄임표가 된 텍스트에 hover 했을 때 Tooltip을 보여주는 것이었다. 말줄임표가 없는 텍스트에도 Tooltip을 굳이 보여줄 이유는 없으니, 나는 hover한 Text가 말줄임표가 적용되었는지 안 되었는지 구별할 수 있는 로직을 구현해야 한다.

그럼 어떻게 해야 할까? DOM 요소의 실제 표시 너비(scrollWidth) 현재 보이는 너비(clientWidth)를 비교하면 된다!

 

- scrollWidth: 요소 안의 내용이 차지하는 전체 너비 (스크롤 포함)

- clientWidth: 요소가 보여주는 영역 너비

 

만약 scrollWidth가 clientWidth 보다 크다면, 내용이 잘려서 말줄임표 표시가 되었다는 의미가 된다.

---

ref를 이용해 툴팁 컴포넌트 구현해보기

import React, { useRef, useState, useEffect } from 'react';
import './EllipsisTooltip.scss';

interface EllipsisTooltipProps {
  text: string;
  className?: string;
}

const EllipsisTooltip: React.FC<EllipsisTooltipProps> = ({ text, className }) => {
  const textRef = useRef<HTMLDivElement>(null);
  const [isEllipsed, setIsEllipsed] = useState(false);

  useEffect(() => {
    const el = textRef.current;
    if (el) {
      setIsEllipsed(el.scrollWidth > el.clientWidth);
    }
  }, [text]);

  return (
    <div
      ref={textRef}
      className={`ellipsis-tooltip ${className ?? ''}`}
      title={isEllipsed ? text : undefined}
    >
      {text}
    </div>
  );
};

export default EllipsisTooltip;

 

textRef를 div에 걸어준다. 그리고 아까 설명한 로직을 useEffect 안에 작성만 해주면 된다! 참고로 scss 파일은 위에 작성해둔 코드를 참고하면 된다!

 

후기를 덧붙이자면 나는 title 속성에 대해서도 처음 알았는데 HTML 요소에 마우스를 올렸을 때 브라우저 기본 툴팁을 띄워주는 속성이라고 한다!!

아직도 머나먼 프론트엔드 개발자로 성장하는 길... 앞으로 더 열심히 공부해보자!!