Here's a sample code that I use onMouseEnter. There's a workaround using max-content and getClientRects().
Javascript text overflow ellipsis update#
They have tried to update the APIs that return fractional pixels, but it was reverted due to webcompat. If the element width are 150px and the scrollWidth are 150.4px (rounded to 150), then this check will be returning false even if the browser are showing ellipsis in the text. webkit-line-clamp: 2 - here we can specify.
W3C has a legacy API that returns element.scrollWidth value as rounded which is causing the comparison in some cases to to return false. text-overflow: ellipsis - optional, it will add three dots at the end of the trimmed line. Check if offsetWidth is Less than scrollWidth.
Javascript text overflow ellipsis how to#
There's a small pixel problem with the answers above when comparing offsetWidth > scrollWidth. In this article, well look at how to check for the text-overflow ellipsis in an HTML element. Then use it to find elements $truncated_elements = $('.my-selector:truncated') If so, you know it's going to have been truncated.įor example, using jQuery: var $element = $('#element-to-test') text-overflow: ellipsis overflow: hidden white-space: nowrap We can add these styles by CSS class to the element but as we are using directives, it is not good to create any dependencies.
If you are viewing this in Firefox it will not work if you do not have Javascript enabled. The idea is that you clone the element, remove any bounding width, and test if the cloned element is wider than the original. The second example shows it with ellipsis. I'm not the biggest fan of solutions like this, but it certainly produces the correct result time and time again. One of the following values: Default: clip. CSS page for this property: text-overflow Possible values: The type of this property is string. Ideally, we would add ellipsis, but we can’t reliably position them. textOverflow You can find the related objects in the Supported by objects section below. But it can be a bit awkward to just cut the text off like that. Once upon a time I needed to do this, and the only cross-browser reliable solution I came across was hack job. If we want to expose three lines of text, we can just make the height of the container 3.6em (1.2em × 3).
0 kommentar(er)
