Here is the structure I am working with:
<div class="card">
<div class="container">
<slot />
</div>
</div>
The Card element has a fixed width of 33rem.
The container within it spans 100% of the width.
I need to determine when the content inside the slot overflows, so that I can add a class to the container element with a word-break property.
I attempted to achieve this using the following code snippet:
if(el.clientWidth < el.scrollWidth || el.clientHeight < el.scrollHeight) {
console.log('overflows')
}
However, this approach does not work because the el(='container') is set to a width of 100%.
How should I proceed in order to accomplish this task?
PS:
The styles applied to my container element are as follows:
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;