Any way to make text overflow ellipsis?

[colonder]

I wonder whether there is any possibility of adding a text overflow ellipsis to the whole HTML. I looked on the Internet and I know it might be tricky to apply this CSS property to the entirety of the text, or actually, the parent element of all the child tags.

[milesj]

You can probably add the overflow css to a parent element that renders the interweave content.

[colonder]

Hey @milesj, thanks for the response. My particular use case is as follows: I have a Strapi CMS with CKEditor plugin installed which I use to write rich texts for the website. The plugin sends text as raw html which I would like to parse with Interweave and display on the website. CKEditor requires some specific styles for the content to be displayed correctly. I would like to handle cases when the text is long and extends beyond the specified div. This is a snippet that I wrote for illustration purposes
https://codesandbox.io/p/devbox/billowing-river-kyjrzv?workspaceId=f1067f87-10fd-4029-9749-33a6d857ef9b

[milesj]

@colonder Can that sandbox be made public?

[colonder]

@milesj I made it public, please check again

[milesj]

Ok I see what you mean. This one is definitely tricky... I don't think this could be solved with CSS alone, you'll probably need JS for it. Basically the JS would work like this:

• Get the width/height of the parent box
• Loop through the elements in the box and calculate width/height of each element
• If the element size is larger than the parent box, remove the element from the DOM
• The last element in the box, do some magic here to apply the truncate (can maybe do CSS here)

The other option is to just overflow hidden the parent, and make it look nice.

[colonder]

Is there any way to easily calculate width and height of each element?

[milesj]

You would use normal DOM based JS, something like:

document.querySelector('#parent').children.forEach(node => {
  node.clientWidth;
  node.clientHeight;
});

It's been a while since I've done that, so the APIs may be slightly off.

[colonder]

I found a CSS workaround though not perfect. It requires roughly estimating how much space the text will take...

overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: $numberOfLines;
-webkit-box-orient: vertical;

Otherwise another neat solution is to create an overlay like in here https://css-tricks.com/text-fade-read-more/