From b63cc1e098ace8e6d3dfb9c368e77940ba4fc5fb Mon Sep 17 00:00:00 2001 From: Ardis Lu Date: Wed, 12 Apr 2023 22:09:16 -0700 Subject: [PATCH] Update wording --- index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 63395c7..9372183 100644 --- a/index.html +++ b/index.html @@ -228,7 +228,7 @@ new ResizeObserver(_ => elem.style.setProperty('--lines', Math.floor(elem.client ullamcorper dignissim cras tincidunt lobortis feugiat vivamus.

Note that overflow: hidden will only hide text that is outside the - container element. So if you resize the paragraph to cut through the middle of a line, the ellipsis will appear in + container element. So if you resize the paragraph to cut through the middle of a line, the ellipsis will appear on the line above it but the cut-off text will still be visible.

@@ -237,8 +237,8 @@ new ResizeObserver(_ => elem.style.setProperty('--lines', Math.floor(elem.client

Dynamic number of lines: quality of life improvements

- If your paragraph's height is dynamic, it's useful to add some JavaScript to snap the paragraph's height to - a multiple of its line-height whenever the paragraph is resized. To do so, update the event listener like so: + If your paragraph's height is dynamic, it's useful to add some JavaScript to snap the paragraph's height to a multiple of + its line-height whenever the paragraph is resized. To do so, update the event listener:

 new ResizeObserver(_ => {
@@ -247,7 +247,7 @@ new ResizeObserver(_ => {
   elem.style.setProperty('--lines', lines);
   elem.style.setProperty('height', `${lines * lineHeight}px`);
 }).observe(elem);
-

Lastly, it's best to debounce the event listener for better performance and to prevent the event listener from fighting with +

It's also best to debounce the event listener for better performance and to prevent the event listener from fighting with the user for control over the element's height while the user is resizing it. Using this basic debounce function:

 function debounce(fn, wait) {
-- 
2.47.3