Given that setup our useEffect hook will look like the following: So we define let's say a containerRef constant like const containerRef = useRef(null) and we set the ref prop of the text container element to be ref=. To interact with the DOM instance of an element and read those values, we set up the element with a ref prop and assign it a reference to our useRef hook result. This is a “clever” way to check whether an element has CSS clamping applied to it. We want to compare the element's clientHeight and scrollHeight. ![]() We want to be able to interact with the DOM instance of our element containing the text. NOT render a button when the text length doesn't require clampingĬheck whether to render a button on window resize (if the container for the text is of fluid width, a window resize could cause it to change the number of effective lines rendered given the text) The ever so slightly tricky part comes when we want to: We more or less covered the following from our component structure: NOTE: I like to use the classnames package as a shorthand to conditional CSS classes (the bundlephobia report on it is kind, and I tend to use it in more then one place). clamp CSS is applied, and showButton, which would conditionally render the button based on whether it's necessary at all (this is determined by the dynamic text length and the fluid size of the container).Ī simple click handler can flip the clamped state: const handleClick = () => setClamped(!clamped) Īnd that state will in turn control whether we apply the. The component needs two internal states, clamped, which would determine whether the text is currently truncated (this would decide whether the button reads “Read more” or “Read less”, and whether the. NOT render the Read more/less button when the text length doesn't require clamping Show the truncated version again when clicking on “Read less” Show the entire text when clicking “Read more” We will conditionally apply this CSS class to our element, as we want our component to be able to toggle between a “Read more” and a “Read less” state. Mozzila has a nice guide on the ins and outs, but for the purpose of our article, I'll just share the snippet bellow: ![]() I think the caniuse stats are decent (it's now September 2021) but it all depends on your use case. ![]() If you're in doubt whether you should use line-clamp, these should help you decide: If you want to skip ahead and see the full solution (and just copy paste), you're welcome to base your work on this template. I'll try to convey the way I implement this in the context of a React application. Nowadays, although still vendor prefixed, line-clamp offers a much more elegant, CSS driven solution - the style-sheet does all the heavy lifting, all we need to do is specify the number of lines we want to have visible. You could potentially create a canvas element in your JavaScript code, render the text and take measurements from there. In the olden days, you would have to do all sorts of hacks in order to determine the height/width of one single line of text (in your font size, with your font type, give the width of the container).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |