Show More Only When It's Cut Off

CSS clamps the text, so only the browser knows whether anything was hidden: compare scrollHeight, the full content, with clientHeight, the box you can see. The answer changes whenever the width does (narrower box, more wrapped lines), so a ResizeObserver measures again on every resize.

@itsnas description.tsx

codedescription.tsx

'use client'
 
function Description({ text }: { text: string }) {
  const ref = useRef<HTMLParagraphElement>(null)
  const [expanded, { toggle }] = useToggle()
  // @src/code/use-overflow
  const overflows = useOverflow(ref, { axis: 'y', paused: expanded })
 
  return (
    <>
      <p className={expanded ? undefined : 'line-clamp-3'} ref={ref}>
        {text}
      </p>
 
      {(overflows || expanded) && (
        <button aria-expanded={expanded} onClick={toggle} type="button">
          {expanded ? 'Show less' : 'Show more'}
        </button>
      )}
    </>
  )
}

main

Nas (@itsnas)

'use client'
 
interface UseOverflowOptions {
  axis: 'x' | 'y'
  /** Stop measuring and keep the last result. */
  paused?: boolean
}
 
/** Whether the element's content overflows it, kept current on resize. */
export function useOverflow(
  ref: RefObject<HTMLElement | null>,
  { axis, paused = false }: UseOverflowOptions,
): boolean {
  const [overflows, setOverflows] = useState(false)
 
  useEffect(() => {
    const el = ref.current
    if (!el || paused) return
 
    // Vertically, allow a pixel of sub-pixel line-height rounding.
    const measure = () =>
      setOverflows(
        axis === 'x'
          ? el.scrollWidth > el.clientWidth
          : el.scrollHeight - el.clientHeight > 1,
      )
 
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(el)
    return () => observer.disconnect()
  }, [ref, axis, paused])
 
  return overflows
}

main

Nas (@itsnas)

paused is what keeps "Show less" on screen: once expanded, nothing overflows, so a live measurement would hide the very button that collapses it again. Use axis: 'x' for a single truncated line.