从踩坑到填坑：direction:rtl实现文字溢出头部省略的正确姿势

大家在日常开发中，经常会遇到文字溢出时，只需要看到文章的核心内容即可，而核心内容往往是文章的头部，因此，一个常见需求是文字溢出后，头部省略而不是尾部省略，即需要使用text-overflow: ellipsis配合white-space: nowrap以及overflow: hidden实现，并通过display: inline-block让其在inline模式中依然有效，见代码示例：

<div style="display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
  大家好，欢迎关注我的博客！这是一个很长的句子，如果超出最大长度，我会被截断并用省略号代替。
</div>

这可以正常工作。但，当我们遇到需要将文字从右到左（RTL）排列的情况时，常规的设置就会失灵，即头部省略不起作用了，而是变成了尾部省略，见代码示例：

<div style="direction: rtl; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
  大家好，欢迎关注我的博客！这是一个很长的句子，如果超出最大长度，我会被截断并用省略号代替。
</div>

之所以会出现这种情况，是因为direction: rtl改变了文本的排列方向，导致省略号出现在了尾部。

那么，我们应该如何解决这个问题呢？

我们可以使用unicode-bidi属性来解决这个问题。unicode-bidi属性用于控制文本的双向性，我们可以通过设置unicode-bidi: bidi-override;来覆盖默认的双向性，并强制文本从左到右（LTR）排列。

<div style="direction: rtl; unicode-bidi: bidi-override; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
  大家好，欢迎关注我的博客！这是一个很长的句子，如果超出最大长度，我会被截断并用省略号代替。
</div>

这样，就可以实现文字溢出时，头部省略，而不是尾部省略了。

值得注意的是，unicode-bidi属性只对某些语言有效，比如阿拉伯语、希伯来语和波斯语。对于其他语言，可以使用其他方法来实现头部省略，比如使用direction: ltr和text-align: right，或者使用float: right。