記錄--超長溢位頭部省略打點，坑這么大，技巧這么多？

這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助

在業務中，有這么一種場景，表格下的某一列 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;
}

結果如下：

簡單介紹一下 direction：

• direction：CSS 中的 direction 用于設定文本排列的方向， rtl 表示從右到左 (類似希伯來語或阿拉伯語)， ltr 表示從左到右，

另外兩個與排版相關的屬性還有：

• writing-mode：定義了文本水平或垂直排布以及在塊級元素中文本的行進方向，
• unicode-bidi：它與 direction 非常類似，兩個會經常一起出現，在現代計算機應用中，最常用來處理雙向文字的演算法是Unicode 雙向演算法，而 unicode-bidi 這個屬性是用來重寫這個演算法的，

OK，那么上述需求，是不是簡單的添加一個 direction: rtl 就能解決問題呢？我們嘗試一下，

direction: rtl 會導致使用下劃線 _ 連接的數字內容排版錯誤

我們給上述的代碼，添加一個簡單的結構：

<div>
    13993199751_18037893546_4477657
</div>
<div>
    13993199751_18037893546_4477656
</div>
<div>
    13993199751_18037893546_4477655
</div>

div {
    width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
}

~成功了！~看似好像成功了，但是出了一點小問題！

雖然實作了頭部打點，但是我們的數字結尾好像不是我們想要的結果，仔細看一下數字的結尾情況：

這是什么情況呢？

這是由于 direction 在處理純數字、非純數字文本上的規則不一致，我們再來看這么一段測驗代碼：

<div>
    11111_22222_33333_44444
</div>
<div>
    11111 22222 33333 44444
</div>
<div>
    aaaaa bbbbb ccccc dddddd eeeeee
</div>
<div>
    aaaaa_11111_22222_33333_44444
</div>

CSS 層面不考慮溢位情況，僅作用 direction: rtl ，

div {
    width: 240px;
    direction: rtl;
}

在修改書寫方向后，效果如下：

可以看到，這里非常核心的一點在于，對于純數字的文本內容，數字的排列順序也會跟著相應的書寫順序，進行反向排列！

而形如 11111_22222_33333_44444 這種用下劃線連接的文本，處理的方式也會與 11111 22222 33333 44444 一樣，實作了從左往右的排列，改變了原有的順序，

多方案解決

因為我們的 ID是由純數字加下劃線組成，所以無法繞開這種展示，

那么，基于這個現狀，我們可以如何去解決這個問題呢？

方案一：兩次 direction 反轉

方法一，既然最終展示的文案被反轉了，那么我們可以嘗試通過多一層的嵌套，進行二次反轉可以解決問題，

代碼如下：

<div >
    <span>13993199751_18037893546_4477657</span>
</div>

.g-twice-reverse {
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
    
    span {
       direction: ltr; 
    };
}

嘗試后的結果如下：

.g-twice-reverse {
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
    
    span {
       direction: ltr; 
       unicode-bidi: bidi-override;
    };
}

最終結果如下：

完美！這里，我們利用了兩層結構：

1. 外層的 g-twice-reverse 正常設定從右向左的溢位省略打點
2. 內容添加一層 span，利用 direction: ltr 和 unicode-bidi: bidi-override 的配合，在內部再反向反轉排版規則，

當然，這里需要解釋一下 unicode-bidi，

bidi-override 的作用是對文本進行覆寫，使得其中的行內元素（inline element）按照我們想要的書寫方向展示，而 unicode-bidi: bidi-override 取值的作用是用于覆寫默認的 Unicode 雙向演算法以控制文本的顯示方向，

這里，bidi-override 和 direction 在 <span> 中的組合，實作了更細粒度的文本方向處理，

方案二：通過偽元素破壞其純數字的性質

上述的方案需要完全理解其思路還是有比較高的成本的，比較燒腦，

有沒有更好理解的方案呢？我們繼續嘗試，

既然上面被反轉排版的內容是純數字或者由下劃線連接成的數字，那么我們能不能嘗試破壞其純數字的特性？

譬如，給陣列的頭部添加一個看不見字母，嘗試一下，這里構造兩組資料對比一下：

<div >
    <span>a</span>
    <span>546_4477657</span>
</div>
<div >
    <span>a</span>
    <span>13993199751_18037893546_4477657</span>
</div>

.g-twice-reverse {
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
}

看看效果：

 嘿，別說，這個方案看上去真的可行，只是添加一個 <span>a</span> 肯定是不合適的，后面維護的同學肯定一臉懵逼，并且這個 a 字母需要隱藏起來，思來想去，這不是和以前清除浮動的場景非常類似嗎？這里使用偽元素再貼切不過，我們再改造下代碼：

<div >
    <span>546_4477657</span>
</div>
<div >
    <span>13993199751_18037893546_4477657</span>
</div>

.g-add-letter {
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
    
    span::before {
      content: "a";
      opacity: 0;
      font-size: 0;
    }
}

我們通過偽元素，使用在元素前面添加了一個字母 a，并且設定偽元素的 font-size: 0 和 opacity: 0，從外觀上，完全看不出有這么個元素，非常好的隱藏了起來，同時，起到了破壞內容其純數字的性質，

效果如下：

方案三：通過 \200e LRM 標記位

我們繼續優化我們的方案，

上面通過偽元素的方式，已經能夠實作在對業務結構影響最小化及代碼增量較少的前提下，實作想要的結果，

問題還是在于插入的這個字母 a，一來是不夠優雅，二是這種解決方案更像是一種 HACK 的解決方式，隨著時間長河的推進，這種代碼即便留下了注釋，也容易造成可讀性上困擾，

所以，我們需要嘗試替換掉這個 a 字母，

這里，通過查閱資料，最終找到了這樣一個字符 -- \200e，

\200e：是左到右標記（Left-to-Right Mark，LRM）的 Unicode 碼點，它是 Unicode 字符方向控制工具之一，用于強制將文本的閱讀方向指定為從左到右，在前端排版中，特別是處理多語言文本時，由于不同語言書寫時有不同的書寫方向，因此可以使用 LRM 來指定文本的書寫方向，以確保文本能夠正確地顯示，

這里，通過 \200e 替換掉 a，這里用 \200e 的目的與 a 的目的其實是不一樣的：

1. 在字串前面通過偽元素添加一個 a，目的是破壞其純數字的特性
2. 在字串前面通過偽元素添加一個 \200e，目的是強制控制接下來文本的排版順序

添加 a 的方案類似于一種 Hack 技巧，而 \200e 可以理解為就是專門解決這種場景而誕生的特殊字符，

好，看看改造后的代碼：

<div >
    <span>13993199751_18037893546_4477657</span>
</div>

.g-add-letter {
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
    
    span::before {
    content: "\200e";
    opacity: 0;
    font-size: 0;
  }
}

效果如下：

這樣，我們算是比較完美的解決了這個問題，

方案四：通過 <bdi> 標簽

那么，上述的方案已經是最佳方案了嗎？或者說，還有沒有不需要添加偽元素的方式？

在查找解法的程序中，還發現了一個非常有意思的標簽 -- <bdi>，

<bdi>：是一個 HTML 標簽，表示“雙向的隔離器”（Bidirectional Isolation），它是一個比較新的標簽，主要用于解決混合顯示多個語言文本時的排版問題，

在多語言文本中，由于不同語言之間的書寫方向和文本組織方式可能有所不同，如果直接拼合在一起顯示，容易導致排版混亂，甚至出現不合法的語言混排現象，而 <bdi> 標簽則提供了一種簡單的解決方案，可以隔離不同的語言文本，確保它們按照正確的順序呈現，并避免混亂的語言混排現象，

具體來說，<bdi> 標簽可以將一段文本從周圍文本隔離開來，創建一個獨立的文本環境，使得文本能夠按照正確的書寫方向呈現，在使用該標簽時，可以使用 dir 屬性來指定文本的書寫方向，可以是從左到右（dir="ltr"）或者從右到左（dir="rtl"）等，

綜上所述，<bdi> 標簽的作用是提供一種簡單的解決方案來排版混合顯示多個語言文本，通過隔離不同的語言文本，確保它們按照正確的順序呈現，并避免混亂的語言混排現象，

因此，利用 <bdi> 標簽，我們可以再進一步省略掉偽元素的部分：

<div >
    <bdi dir="ltr">13993199751_18037893546_4477657</bdi>
</div>

.g-bdi {
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    white-space: nowrap;
}

此種方案就比較純粹，回歸了最初的代碼，只是多了一層 <bdi> 并且設定了其內部語言排版方向，

最終，結果如下：

 上述四種方案的完整代碼，你也可以戳這里：CodePen Demo -- 多種方式解決下劃線數字的頭部溢位省略打點排版問題

總結一下

本文，我們介紹了一種在頭部省略溢位的情境下，對于形如 11111_22222_33333_44444 這種用下劃線連接的文本，處理的方式會被對待成 11111 22222 33333 44444 一樣的情況，導致了最終排版結果與我們的預期不符，

為了解決這種問題，我們介紹了 4 種不同的解決方案：

1. 方案一：兩次 direction 反轉
2. 方案二：通過偽元素添加字母，破壞其純數字的性質
3. 方案三：通過 \200e LRM 標記位
4. 方案四：通過 <bdi> 標簽

上述 4 個方案的思維與處理方式各有優劣，圍繞多語言排版涉及了不同的知識，從一個很小的需求中，能夠窺探到其中復雜的邏輯，是一個很好的業務實操案例，

本文轉載于:

https://juejin.cn/post/7226540105698197563

如果對您有所幫助，歡迎您點個關注，我會定時更新技術檔案，大家一起討論學習，一起進步，

標籤：其他

上一篇：前端微服務無界實踐

下一篇：返回列表