[react] text-overflow: ellipsis 활성 여부 react code에서 확인하는 방법

개발하다보면, 문구 줄임 여부에 따라 '더보기' 버튼을 노출를 결정할 때 있다. 이때 CSS에서 계산된 값을 JS에서 확인해야 하므로 어떻게 확인할 수 있는지 알아보자

 

샘플코드

const ref = useRef<HTMLDivElement>(null)
const isEllipsis = ref.current.clientWidth >= ref.current.scrollWidth

return (
  <div>
    <div ref={ref}>hello world</div>
    {isEllipsis && <button>더보기</button>}
  </div>
)

 

 

개념

scrollWidth

보이는것과 상관없이 컨텐츠가 가지고 있는 영역

 

clientWidth

보이는 부분에서 컨첸츠가 가지고 있는 영역

https://jsfiddle.net/y8Y32/25/