I have a scenario, text in the table header, that also can be multiline. What I'm struggling with is, I need to show ellipsis only after a full word, don't want to break the word. Now I need it in a multiline and right-align text also. I have tried various CSS solutions available on SO. I can't have a fixed width.

word-break: break-all // not doing the job

::before & ::after // worked but only for last word

I tried this: Ellipsis for right aligned text

HTML:

<div class="column-header-container" style="display: flex;"><span class="column-name align-right" style="flex-grow: 1; -webkit-line-clamp: 1);"><div class="header-title-text">Right Aligned</div></span></div>

Requirement: Show ellipsis if there is more text, show ellipsis only after a full word, donot break the word for ellipsis.

Any CSS expert.