Detecting CSS line-clamp by javascript can be made by comparing the scrollHeight and the clientHeight of the “clamped” element.
The “true” height of the element is clipped by the overflow: hidden CSS property, but the DOM property scrollHeight will report the full height, while the clientHeight reports the rendered height.
The below example shows a clamped text.
Try hovering it to see if detection logged. (text is editable)
const isTextClamped = elm => elm.scrollHeight > elm.clientHeight
new ResizeObserver(e => {
console.clear()
console.log( isTextClamped(e[0].target) )
}).observe(elem);p {
width: 200px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
resize: both; /* allowing resize for this demo only */
}<p contenteditable id='elem' spellcheck="false">
<strong>Resize me - </strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>👉 Here’s a Codepen which illustrates this live