背景

实现一个文字溢出省略的效果很简单，想必大家都会：

html 复制代码

// html
<div class="container">超级无敌大怪兽在此！</div>

// css
.container {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

overflow和text-overflow很好理解，就是white-space看起来比较奇怪。不过这不是本篇文章的重点，不过多赘述，直接看MDN的定义好了：white-space - CSS：层叠样式表 | MDN

最终的效果如下所示：

正常情况下，用这个就好了。可是有些情况，文字的前缀是一样的，后缀才会有区别，如果把后边隐藏了，那两者就看不出区别了：

嘻嘻，光凭这个图，猜不到这两段文字是啥吧？

实际上这两段是这样的：

html 复制代码

<div class="container">超级无敌大怪兽好帅！</div>
<div class="container">超级无敌大怪兽好强！</div>

这时候就有看过我之前文章的小伙伴说了，简单，我们给它包上一层溢出提示，hover上去显示完整文字就好了，详见实现一个简单的文本溢出提示效果 - 掘金：

虽然是达到了区分的效果，但是你不觉着太麻烦了吗，还得一个个hover上去看，一点都不直观。

那么这时又有经验丰富的小伙伴说了，简单，给它加个direction: rtl，此贴终结！

css 复制代码

.container {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

  	// 加这么一行
    direction: rtl;
}

效果如下：

看上去很不错，我最开始也这么搞的。

。。。

然后，在未来的某一天，测试给我提了一个bug，诶，你这个感叹号怎么不见了？

啊，还有这种事儿，这么神奇的吗？

排查

因为我的场景是后端返回的字符串，首先想到的是甩锅，排查后端返回的字符串有没有问题。

emmmm。。。没有问题。

然后打开开发者工具，直接定位到对应节点，查看字符串是否有问题：

emmmm。。。好像也没问题。

撞了鬼了。

然后开始测试不同字符的情况，发现只有标点符号不见了，于是猜测是不是direction: rtl这个小坏蛋干了什么坏事，因此把容器的宽度调大，完整展示字符串：

果然，感叹号跑前边去了。

第一时间上MDN查这玩意：direction - CSS：层叠样式表 | MDN，没找到太多有用的信息，但是猜也猜到是文字序变了，相当于"超级无敌大怪兽！"变成了"！兽怪大敌无级超"。但是很神奇，实际的效果是只有感叹号变到前边去了，文字并没有倒序，于是问了问聪明的ChatGPT：

好好好，这样搞是吧，行。

那我再加一层，给你反转回来行吧，于是代码变成了这样：

html 复制代码

// html
<div class="container">
    <span>超级无敌大怪兽好帅！</span>
</div>
<div class="container">
    <span>超级无敌大怪兽好强！</span>
</div>

// css
.container {
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    direction: rtl;
}

span {
    direction: ltr;
}

效果如下：

哈？我的感叹号呢，还是没有？

怎么会是呢，遇事不决gpt，不过这次gpt给的答案，我不是很满意了。。。

那么回归原始人模式，Google一下，你就知道。

皇天不负有心人，让我找着了：超长溢出头部省略打点，坑这么大，技巧这么多？ - ChokCoco - 博客园，这篇文章给了四个解决方案，但是我还是喜欢反转两次的，里边提到了一个属性，unicode-bidi，不加这个还不行，先试试：

css 复制代码

span {
    direction: ltr;
    unicode-bidi: bidi-override;
}

嘿，您猜怎么着，立竿见影：

让我们看看这个unicode-bidi到底是个什么妖魔鬼怪，unicode-bidi - CSS：层叠样式表 | MDN，好家伙，还不建议人使用呢，就要用，就要用，气死你！

总结

问题就是这么个问题了，解决方案也给了，人direction属性本来也不是为了让你文字溢出头部省略的，你非得用它，自然就得打点补丁，加上unicode-bidi。

这也不是个什么特别难的东西，但是分享出来的目的是希望大家以后遇到相同场景，可以避免踩到相同的坑。

感觉这个效果实现得不是特别优雅，但我暂时也没想到更好的方案，如果各位大佬有更好的方案，请务必赐教！

水完了。

direction：rtl实现文字溢出头部省略踩坑

背景

排查

总结