CSS 文本超出提示效果

在 mac 文件管理中有這樣一個小細節。

1. 當文件名不超過一行時，完整顯示，此時鼠標放上去無任何提示
2. 當文件名超過一行時，出現省略號，此時鼠標放上去提示顯示完整文件名

一個很微妙但很是人性化的細節（ps.都能徹底看見也就不須要提示了😘）。其實這類效果在 web 中，經過簡單的 CSS 也能輕易實現的。下面就來看看吧~

1、CSS 實現思路

相信你們都知道title這個屬性，原生的提示就用這個了，能夠說從上古世紀就開始支持，下面是MDN上關於這個屬性的介紹

title 全局屬性包含了表示諮詢信息文本，和它屬於的元素相關。這個信息一般存在，但毫不必要，做爲提示信息展現給用戶

用法也很是簡單

<p  class="txt" title="這是absolute">元素會被移出正常文檔流，並不爲元素預留空間，經過指定元素相對於最近的非 static 定位祖先元素的偏移，來肯定元素位置。絕對定位的元素能夠設置外邊距（margins），且不會與其餘邊距合併。
</p>

這裏 title 的表現樣式還有停留時間與操做系統和瀏覽器有關，也不可修改

如今問題來了，title 屬性是預先添加的，而且沒法經過樣式來控制是否顯示，那麼，CSS 如何作到動態處理呢？接着往下看

雖然 CSS 沒法動態去改變 title 屬性，換個思路，假若有兩份相同的文本，其中一份是帶有title屬性的，好比

<p class="wrap">
  <span class="txt">元素會被移出正常文檔流，並不爲元素預留</span>
  <span class="title" title="元素會被移出正常文檔流，並不爲元素預留">元素會被移出正常文檔流，並不爲元素預留</span>
</p>

爲了方便演示，這裏給帶有title屬性的文本加上背景色，而後暫且稱爲文本A和文本B吧（如下適用），以下所示

如今只須要在單行文本的時候展現文本A，多行文本的時候展現文本B，就能夠實現咱們想要的功能了。

那麼，如何判斷文本是否超出一行呢？

2、多行文本判斷

首先，當文本超出一行時，高度必然會發生變化（😂），假設行高爲 1.5，那麼1行文本就是 1.5em，2行就是 3em，依次類推...

可是，若是咱們限制A的最大高度爲兩行，那麼一行和多行不就區分開了嗎（單行高度是1.5em，多行高度是3em）

.txt{
  display: block;
  max-height: 3em;/*最大高度爲2行*/
}

如今關鍵的一步來了，把文本B 往上移動2行的距離，這裏用相對定位實現（margin也能夠）

.title{
  position: relative;
  top: -3em; 
}

是否是有點奇怪了？其實就是往上位移了2行的距離，這樣在文本A只有一行的時候，文本B就恰好「出界」了；在文本A有多行的時候，因爲高度只有2行的高度，文本B恰好「覆蓋」在上面，原理示意以下

這時，若是把父級的高度限制在一行，而且把文本B作單行截斷

.wrap{
  line-height: 1.5;
  height: 1.5em;
}
.title{
position: relative;
top: -3em;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}

這樣，在多行的時候，視野內看到的就是文本B了，效果以下

最後，把父級超出隱藏，還有文本B背景設置成父級相同的顏色就能夠了~

到這裏爲止，就實現了文章開頭所示的效果，完整代碼能夠查看codepen auto title（記得鼠標放上去o~）

爲了更方便直觀的演示，這裏作了一個相似的列表以下

在線例子可訪問codepen auto title list（記得鼠標放上去o~）

3、其餘實用案例

下面再介紹兩個更加實用的提示效果

1. 中間省略效果

細心的小夥伴可能已經發現，文章開頭的文本超出時，省略號是在中間的。

這種設計有什麼好處呢？好比有時候不少文件的名稱是相同的，只有後綴名不一樣，或者不少會有個版本號，舉個栗子：

當寬度較小時，末尾出現了省略號，這就很尷尬了，因爲前面都是同樣的，一眼看上去徹底分不清文件名哪一個跟哪一個（😵）

若是省略號在中間就很好區分了。那麼，如何實現這一效果呢？

藉助上面的佈局，下面全部分析只須要對文本B進行處理就好了。關於中間省略效果，目前尚未專門的 CSS 樣式能夠實現，不過能夠模擬它，接着往下看

首先，複製一份文本，這裏使用::before僞類經過content生成

.title::before{
    content: attr(title);
}

很明顯，這個時候兩段文本是鏈接在一塊兒的

而後，給:before設置右浮動，寬度設置成 50%

.title::before{
    content: attr(title);
    width: 50%;
    float: right;
}

接着，給:before設置超出截斷

.title::before{
    /**/
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

最後，把:before換成前面省略號的效果，能夠用direction實現，關於direction，平時可能沒怎麼接觸，其實就是改變排版方向的，默認是從左到右，省略號在右側，若是改爲從右到左，那麼省略號也會在左邊，因此

.title::before{
    /**/
    direction: rtl; /*從右到左*/
}

如今看看完成效果吧

有一點小問題，中間的省略號左邊的空隙有時候有點大，以下

這個是由於這個地方恰好換行了，全部空出了一小截。這裏能夠用文本兩端對齊簡單優化一下

.title{
    /**/
    text-align: justify;
}

這樣就能保證最右端的文字是靠右的（固然文本的間隙會略微增長一點~），效果以下

在線例子可訪問codepen auto middle ellipsis（記得鼠標放上去o~）

2. 超出滾動效果

有時候，title 提示可能有點弱，不夠明顯，產品須要文本超出的時候，鼠標放上去能夠自動滾動起來，相似這樣的效果

如何實現的呢？其實藉助上面的佈局，這裏實現就很是容易了，只須要對文本B作滾動動畫便可，關於CSS3實現無縫滾動，這裏介紹一下實現：

要作到首尾無縫滾動，首先須要複製一份相同的文本，這裏使用::after僞元素經過content生成

.title::after{
    content: attr(data-title);/*複製一份文本，下圖綠色的部分*/
}

如今須要在一行顯示，不換行

.title{
    /**/
    white-space: nowrap;
}

能夠看到，雖然不換行了，可是寬度仍是父級的寬度，並無跟隨文字內容，這時，能夠設置display: inline-block

.title{
    /**/
    display: inline-block;
    white-space: nowrap;
}

關於寬度跟隨文字內容，其實還能夠用 width: max-content實現，兼容性略差

.title{
    /*
    display: inline-block;
    white-space: nowrap;
    */
    width: max-content;
}

接着，設置animation動畫便可，只須要當transform位移到自身一半50%時迅速歸位，就能達到無縫銜接的效果，以下

.title:hover{
    /**/
    animation: move 10s .3s linear infinite;
}
@keyframes move {
    to {
        transform: translateX(-50%); /*位移到 50% 時 迅速歸位*/
    }
}

這裏首尾的間隙是用 padding 實現的

.title::after{
    content: attr(data-title);
    padding: 0 5em;/*無縫滾動的首位間隙*/
}

在線例子可訪問codepen auto scroll list（記得鼠標放上去o~）

惟一的缺陷是動畫時間是固定的，若是文本很長，可能出現滾動過快的問題

4、總結和說明

本文介紹了一種全新 CSS 自動判斷多行文本的思路，而且帶來3我的性化的小交互。總的來講，其實也沒用到太多的技巧（主要仍是想象力），結構還不算複雜，相信一步步看下來不會有很大的難度。

重點依舊是上面的佈局部分，佈局出來了，下面不少擴展效果也就迎刃而解了。因爲只用到了CSS2相關特性（max-height、文本截斷等），兼容性也是棒棒的，實測能夠兼容到IE7+（全兼容，放心使用），後面的超出滾動效果兼容到IE10+， 如今總結一下實現重點：

1. 轉換思路，節點複製是一個好辦法
2. 經過max-height能夠判斷單行和多行
3. 靈活運用CSS 障眼法層級覆蓋和超出隱藏
4. direction：rtl能夠實現前置省略號的效果
5. 中間省略號能夠用兩段文本拼接的方式模擬
6. 寬度跟隨文本自適應能夠用inline-block實現
7. 無縫滾動效果能夠用位移-50%來實現

好了，這樣一個成本低廉，又很是人性化的小功能，趕忙用起來吧。若是你們以爲不錯的話，歡迎點贊、收藏、轉發❤❤❤~