Revert `Math.floor` to `Math.round` change made in 5cdd5d64e7e5d02425689eee1971fffeee...

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.

diff --git a/index.html b/index.html
index 040ab62040b88495eb1414cee4a7d6cf9422d449..5b9ac965038e082c0615d8155777a8f18b8bca80 100644 (file)
--- 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);