diff --git a/src/index.ts b/src/index.ts
index c294fd6..ee27dc8 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,4 @@
-import { createElement, useRef, useEffect, useCallback, useMemo } from 'react'
+import { createElement, useCallback, useLayoutEffect, useMemo, useRef } from 'react'
 
 interface Props extends React.HTMLAttributes<HTMLElement> {
   accessibility?: boolean
@@ -93,13 +93,14 @@ const NanoClamp = ({
     updateTextRefs(textPlusEllipsis)
   }, [ellipsis, hasText, lines, text])
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     clampLines()
 
-    const clampLinesDebounced = debounceFn(clampLines, debounce)
-    window.addEventListener('resize', clampLinesDebounced)
-
-    return () => window.removeEventListener('resize', clampLinesDebounced)
+    if (elementRef.current != null) {
+      const observer = new ResizeObserver(debounceFn(clampLines, debounce))
+      observer.observe(elementRef.current)
+      return () => observer.disconnect()
+    }
   }, [clampLines, debounce])
 
   return hasText ? createElement(is, clampProps, textRef.current) : null