CSS 文本超出头部…提示效果

<aside> 🔗 toc

</aside>

在业务中，有这么一种场景，表格下的某一列 ID 值，文本超长了，正常而言会是这样：

通常，这种情况都需要超长省略溢出打点，那么，就会变成这样：

但是，这种展示有个缺点，3 个 ID 看上去就完全一致了，因此，PM 希望能够实现头部省略打点，尾部完全展示，那么，最终希望的效果就会是这样的：

OK，很有意思的一个需求，最开始我以为只是实现一个头部超长溢出打点功能，但是随着实践，发现事情并没有那么简单，下面我们就一探究竟。

利用 `direction` 实现头部超长溢出打点

正常而言，我们的单行超长溢出打点，都是实现在尾部的，代码也非常简单，像是这样：

<p>Make CSS Ellipsis Beginning of String</p>

p  {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
}

这里，我们可以通过 direction，将省略打点的位置，从尾部移动至头部：

p  {
      direction: rtl;
}

<aside> <img src="/icons/command-line_lightgray.svg" alt="/icons/command-line_lightgray.svg" width="40px" /> 结果如下：

</aside>

简单介绍一下 direction：

direction：CSS 中的 direction 用于设置文本排列的方向。rtl 表示从右到左 (类似希伯来语或阿拉伯语)， ltr 表示从左到右。

另外两个与排版相关的属性还有：

writing-mode：定义了文本水平或垂直排布以及在块级元素中文本的行进方向。
unicode-bidi：它与 direction 非常类似，两个会经常一起出现。在现代计算机应用中，最常用来处理双向文字的算法是Unicode 双向算法。而 unicode-bidi 这个属性是用来重写这个算法的。

OK，那么上述需求，是不是简单的添加一个 direction: rtl 就能解决问题呢？我们尝试一下。