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

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.