![]() We can check if a piece of text is truncated with the CSS text-overflow property by checking whether the offsetWidth of the element is less than its scrollWidth. So the console log should log true since we truncated the text with the CSS. Then we get the div with querySelector and pass it into the isEllipsisActive. We do the comparison between offsetWidth and scrollWidth as we specified in the isEllipsisActive function. Īnd CSS: div const div = document.querySelector('div') console.log(isEllipsisActive(div)) Mauris feugiat enim sit amet efficitur lobortis. ![]() Sed sollicitudin sem a massa malesuada cursus. Cras porttitor lectus pretium, placerat nulla eget, hendrerit magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam efficitur augue in magna consectetur finibus. Pellentesque a luctus metus, commodo placerat elit. Sed augue ipsum, pharetra in ipsum eget, varius placerat odio. Aliquam in neque laoreet, venenatis quam id, tristique ipsum. įor instance, if we have the following HTML: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Therefore, we can see if a piece of text is truncated with the CSS text-overflow property by checking whether offsetWidth is less than scrollWidth. ScrollWidth tells us the width of the element including the truncated parts. The offsetWidth property of an element tells us the width of the element rendered on the screen. It can be clipped, display an ellipsis (. Check if offsetWidth is Less than scrollWidth The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. In this article, we’ll look at how to check for the text-overflow ellipsis in an HTML element. Sometimes, we want to check whether the text-overflow ellipsis is rendered in the element.
0 Comments
Leave a Reply. |