Angular中阿拉伯语等RTL语言实现文本开头省略号的问题

我们可以通过反转字符串+CSS文本溢出样式实现长文本开头显示省略号的效果，比如长文本MainInterface.SubGroup.InitialSystemActuator会被截断显示为...roup.InitialSystemActuator，具体实现如下：

1. 反转字符串 #

先用JavaScript将目标文本反转：

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

以示例文本为例，反转后得到：rotautcAmetsySlaitinI.puorGbuS.ecafretnIniaM

2. 配置CSS样式 #

通过RTL方向的文本溢出样式实现省略号效果：

div {
  width: 200px;
}

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

3. 对应的HTML结构 #

将反转后的字符串放入样式容器中：

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

方案的核心问题 #

这只是临时实现方案，存在诸多适配问题，其中最关键的是从右到左（RTL）语言的兼容性问题：

• 对于阿拉伯语这类RTL语言，文本本身的阅读方向是从右到左，此时需要在文本的开头（视觉上的右侧）显示省略号，但当前方案的反转逻辑会导致省略号位置完全不符合预期，出现显示错乱。

内容的提问来源于stack exchange，提问作者Yagi