From 2796e6fcee624180f4471ff58e09e49a6aa75e82 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 23 Feb 2026 00:03:40 -0800
Subject: [PATCH] Revert `Math.floor` to `Math.round` change made in
 5cdd5d64e7e5d02425689eee1971fffeeef7a42b

I believe the idea from that commit was that the new actual `lh` value retrieved from the pseudo-element was accurate enough to make the rounding not significant? But it should still be floored regardless.
---
 index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/index.html b/index.html
index 040ab62..5b9ac96 100644
--- a/index.html
+++ b/index.html
@@ -246,7 +246,7 @@
       <pre><code class="language-javascript">const elem = document.querySelector('.dynamic-line-clamp');
 const lh = Number(getComputedStyle(elem, '::after').getPropertyValue('height').slice(0, -2));
 new ResizeObserver(() => {
-  const lines = Math.round(elem.clientHeight / lh);
+  const lines = Math.floor(elem.clientHeight / lh);
   elem.style.setProperty('--lines', lines);
 }).observe(elem);</code></pre>
       <p>Try adjusting the height:</p>
@@ -279,7 +279,7 @@ new ResizeObserver(() => {
         its <code>line-height</code> whenever the paragraph is resized. To do so, update <code>ResizeObserver</code>:
       </p>
       <pre><code class="language-javascript">new ResizeObserver(() => {
-  const lines = Math.round(elem.clientHeight / lh);
+  const lines = Math.floor(elem.clientHeight / lh);
   elem.style.setProperty('--lines', lines);
   elem.style.setProperty('height', `${lines * lh}px`);
 }).observe(elem);</code></pre>
@@ -294,7 +294,7 @@ new ResizeObserver(() => {
 }</code></pre>
       <p>You can update the observer to cancel if another event is fired within 200 milliseconds:</p>
       <pre><code class="language-javascript">new ResizeObserver(debounce(() => {
-  const lines = Math.round(elem.clientHeight / lh);
+  const lines = Math.floor(elem.clientHeight / lh);
   elem.style.setProperty('--lines', lines);
   elem.style.setProperty('height', `${lines * lh}px`);
 }, 200)).observe(elem);</code></pre>
@@ -324,7 +324,7 @@ new ResizeObserver(() => {
 const elem = document.querySelector('.dynamic-line-clamp');
 const lh = Number(getComputedStyle(elem, '::after').getPropertyValue('height').slice(0, -2));
 new ResizeObserver(debounce(() => {
-  const lines = Math.round(elem.clientHeight / lh);
+  const lines = Math.floor(elem.clientHeight / lh);
   elem.style.setProperty('--lines', lines);
   elem.style.setProperty('height', `${lines * lh}px`);
 }, 200)).observe(elem);</code></pre>
@@ -361,14 +361,14 @@ new ResizeObserver(debounce(() => {
     const elem = document.querySelector('#basic-observer');
     const lh = Number(getComputedStyle(elem, '::after').getPropertyValue('height').slice(0, -2));
     new ResizeObserver(() => {
-      const lines = Math.round(elem.clientHeight / lh);
+      const lines = Math.floor(elem.clientHeight / lh);
       elem.style.setProperty('--lines', lines);
     }).observe(elem);
 
     const elem2 = document.querySelector('#full-observer');
     const lh2 = Number(getComputedStyle(elem2, '::after').getPropertyValue('height').slice(0, -2));
     new ResizeObserver(debounce(() => {
-      const lines = Math.round(elem2.clientHeight / lh2);
+      const lines = Math.floor(elem2.clientHeight / lh2);
       elem2.style.setProperty('--lines', lines);
       elem2.style.setProperty('height', `${lines * lh2}px`);
     }, 200)).observe(elem2);
-- 
2.47.3