Text-ellipsis in the beginning with "right-to-left" languages like Arabic in Angular

Question

I have a configuration to display a long text, cut with ellipsis in the beginning.

For instance,we have a long text like
MainInterface.SubGroup.InitialSystemActuator

and the displayed value will be the following :
...roup.InitialSystemActuator

What I do is first reverse the string as following:

const reversedStr = this.str.split('').reverse().join('');

Then I have the following reversed string:
rotautcAmetsySlaitinI.puorGbuS.ecafretnIniaM

Then I apply the following css styles :

div {
  width: 200px;
}

.ellipsis-backward {
  display: block;
  overflow: hidden;
  direction: rtl;
  unicode-bidi: bidi-override;
  white-space: nowrap;
  text-overflow: ellipsis;
}

<div>
  <span class="ellipsis-backward">rotautcAmetsySlaitinI.puorGbuS.ecafretnIniaM</span>
</div>

In this way, I will have the correct text with the ellipsis in the beginning of the long text.

Anyway, this was only a workaround and there are several problems with this strategy. The main issue is to have the ellipsis on the right (the beginning) for Arabic-like languages since it flows right-to-left.

Answer 1

Maybe the :dir(...) selector can solve your problem...

div {
  width: 200px;
}

.ellipsis-backward {
  display: block;
  overflow: hidden;
  direction: rtl;
  unicode-bidi: bidi-override;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ellipsis-backward:dir(rtl) {
  direction: ltr;
}

/* demo only */
.ellipsis-backward[dir="rtl"] {
  direction: ltr;
}

<div>
  <span class="ellipsis-backward">rotautcAmetsySlaitinI.puorGbuS.ecafretnIniaM</span>
  <span dir="rtl" class="ellipsis-backward">rotautcAmetsySlaitinI.puorGbuS.ecafretnIniaM</span>
</div>