Reversed characters when providing another string to text-overflow: ellipsis; - html

Question

I'm trying to create a text-overflow: ellipsis; from the beginning, but in some specific context, it reverses the characters.
This is a CodePen to illustrate the problem: https://codepen.io/DWboutin/pen/yLaoxog
HTML:
<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis">1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</div>
CSS:
div {
margin: 10px 0;
border: 1px solid black;
}
.ellipsis {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
I tried all word-break properties, wrapping the string into another span to force it to be ltr but it don't work.
Thank you for your help

Answer 1

unicode-bidi might help you with an extra wrapper to handle text direction:
https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi
The unicode-bidi CSS property, together with the direction property, determines how bidirectional text in a document is handled. For example, if a block of content contains both left-to-right and right-to-left text, the user-agent uses a complex Unicode algorithm to decide how to display the text. The unicode-bidi property overrides this algorithm and allows the developer to control the text embedding.
div {
margin: 10px 0;
border: 1px solid black;
width:max-content;
}
.ellipsis {
width: 400px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
direction: rtl;
}
.ellipsis span {
direction: ltr;
unicode-bidi: bidi-override;
}
<div class="ellipsis">Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div class="ellipsis"><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>
original text :
<div>Path to you prefered files that you love so much forever and ever fuck yeah</div>
<div><span>1":"#323130",messageLink:t?"#6CB8F6":"#005A9E",messageLinkHovered:t?"#82C7FF":"#004578",infoIcon:t?"#</span></div>
Note, that extra wrapper needs to remain an inline element (display:inline) , an inline-box will not be part of the ellipsis rule but will overflow to the left, a block element will overflow on the right.