We can deduce that if the scrollHeight is larger than the offsetHeight, then the element is truncated. For an overflow view, the scrollHeight is larger than offsetHeight. ScrollHeight is the total scrollable content height, and offsetHeight is the visible height on the screen. Here’s a good answer from StackOverflow on what is offsetHeight and scrollHeight. Is equal to the minimum height the element would require in order to fit all the content in the viewport without using a vertical scrollbar. Is a measurement in pixels of the element’s CSS height, including any borders, padding, and horizontal scrollbars (if rendered). Installation yarn add line-clamp Prior art Clamp. Set options.ellipsis to change the string to be appended to the truncated text. options is an optional configuration object. There’s two attributes for HTML elements which we can use to check if the text is truncated, offsetHeight and scrollHeight. lineClamp (element, lineCount, options) Returns true if text was truncated, else returns false. Check if a text is truncated using offsetHeight and scrollHeight We want to check if the text is actually truncated so that we can show “read more” button for it (we dont need to show read more for short text that is not truncated). Now that we managed to truncate the text, the next step is to check whether a text is truncated or not, as you can see, the short text above (second paragraph) is not truncated even if we have set webkit-line-clamp for it. If the text is shorter than 4 lines, no changes is made. If the text is longer than 4 lines, it will be truncated and will have ending of “ …”. I leave it to the user to decide if that seems necessary on any given project.line-clamp-4 The line clamping does not update on resize.Since the goal is to copy -webkit-line-clamp behavior as closely as possible, this module doesn't accept any options for customization. var els = document.querySelectorAll('.line-clamp') Īfter importing the module (or adding the script tag), initialize with the elements to clamp. You all may have experienced this issue like we have were you want to add Ellipsis using Tailwind.Clear answer there is no such class that you can add currently to achieve that. For the best results, include a line-height as well. Next, set the max-height or height which will be used to calculate the number of lines in browsers that ignore the -webkit-line-clamp property. Installation NPM npm install clamps -saveįirst, apply the -webkit-line-clamp styling for browsers with native support. So this module is designed to mimic -webkit-line-clamp based on an element's height only in browsers that don't support it. Changing the number of lines based on breakpoints or complex patterns can be tricky without using media queries or :nth-child. Web fonts on mobile devices can trip up even the best JS replacement but 90% of mobile browsers support -webkit-line-clamp natively ( source). In some situations, it would be handier to just have a fallback for the CSS. slds-line-clampx-small - truncates at 2 lines of content. SLDS supports four different line clamp limits: slds-line-clamp - truncation is determined by a token, default will truncate at 3 lines of content. There are already a lot of great text truncation options out there (for example, line-clamp, Clamp.js, Shave) but they are, for the most part, purely JavaScript solutions. When applied to text-based elements, Line Clamp allows for configurable multi-line text truncation.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |