mac 文件管理中有這樣一個(gè)小細(xì)節(jié)。

1. 當(dāng)文件名不超過一行時(shí)，完整顯示，此時(shí)鼠標(biāo)放上去無任何提示
2. 當(dāng)文件名超過一行時(shí)，出現(xiàn)省略號(hào)，此時(shí)鼠標(biāo)放上去提示顯示完整文件名

一個(gè)很微妙但非常人性化的細(xì)節(jié)（ps.都能完全看見也就不需要提示了）。其實(shí)這類效果在 web 中，通過簡單的 CSS 也能輕易實(shí)現(xiàn)的。下面就來看看吧~

一、CSS 實(shí)現(xiàn)思路

相信大家都知道 title 這個(gè)屬性，原生的提示就用這個(gè)了，可以說從上古世紀(jì)就開始支持，下面是 MDN 上關(guān)于這個(gè)屬性的介紹

title 全局屬性 包含了表示咨詢信息文本，和它屬于的元素相關(guān)。這個(gè)信息通常存在，但絕不必要，作為提示信息展示給用戶

用法也非常簡單

<p  class="txt" title="這是absolute">元素會(huì)被移出正常文檔流，并不為元素預(yù)留空間，通過指定元素相對(duì)于最近的非 static 定位祖先元素的偏移，來確定元素位置。絕對(duì)定位的元素可以設(shè)置外邊距（margins），且不會(huì)與其他邊距合并。
</p>

這里 title 的表現(xiàn)樣式還有停留時(shí)間與操作系統(tǒng)和瀏覽器有關(guān)，也不可修改

現(xiàn)在問題來了，title 屬性是預(yù)先添加的，并且無法通過樣式來控制是否顯示，那么，CSS 如何做到動(dòng)態(tài)處理呢？接著往下看

雖然 CSS 無法動(dòng)態(tài)去改變 title 屬性，換個(gè)思路，假如有兩份相同的文本，其中一份是帶有 title 屬性的，比如

<p class="wrap">
  <span class="txt">元素會(huì)被移出正常文檔流，并不為元素預(yù)留</span>
  <span class="title" title="元素會(huì)被移出正常文檔流，并不為元素預(yù)留">元素會(huì)被移出正常文檔流，并不為元素預(yù)留</span>
</p>

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

現(xiàn)在只需要在單行文本的時(shí)候展示 文本A ，多行文本的時(shí)候展示 文本B，就可以實(shí)現(xiàn)我們想要的功能了。

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

二、多行文本判斷

首先，當(dāng)文本超出一行時(shí)，高度必然會(huì)發(fā)生變化（），假設(shè)行高為 1.5，那么1行文本就是 1.5em，2行就是 3em，依次類推...

但是，如果我們限制A的最大高度為兩行，那么一行和多行不就區(qū)分開了嗎（單行高度是1.5em，多行高度是3em）

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

現(xiàn)在關(guān)鍵的一步來了，把文本B 往上移動(dòng)2行的距離，這里用相對(duì)定位實(shí)現(xiàn)（margin也可以）

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

是不是有點(diǎn)奇怪了？其實(shí)就是往上位移了2行的距離，這樣在文本A 只有一行的時(shí)候，文本B 就剛好“出界”了；在文本A 有多行的時(shí)候，由于高度只有2行的高度，文本B 剛好“覆蓋”在上面，原理示意如下

這時(shí)，如果把父級(jí)的高度限制在一行，并且把文本B做單行截?cái)?/span>

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

這樣，在多行的時(shí)候，視野內(nèi)看到的就是文本B了，效果如下

最后，把父級(jí)超出隱藏，還有文本B背景設(shè)置成父級(jí)相同的顏色就可以了~

到這里為止，就實(shí)現(xiàn)了文章開頭所示的效果，完整代碼可以查看 codepen auto title（記得鼠標(biāo)放上去o~）

為了更方便直觀的演示，這里做了一個(gè)類似的列表如下

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

三、其他實(shí)用案例

下面再介紹兩個(gè)更加實(shí)用的提示效果

1. 中間省略效果

細(xì)心的小伙伴可能已經(jīng)發(fā)現(xiàn)，文章開頭的文本超出時(shí)，省略號(hào)是在中間的。

這種設(shè)計(jì)有什么好處呢？比如有時(shí)候很多文件的名稱是相同的，只有后綴名不同，或者很多會(huì)有個(gè)版本號(hào)，舉個(gè)栗子：

當(dāng)寬度較小時(shí)，末尾出現(xiàn)了省略號(hào)，這就很尷尬了，由于前面都是一樣的，一眼看上去完全分不清文件名哪個(gè)跟哪個(gè)（）

如果省略號(hào)在中間就很好區(qū)分了。那么，如何實(shí)現(xiàn)這一效果呢？

借助上面的布局，下面所有分析只需要對(duì) 文本B 進(jìn)行處理就行了。關(guān)于中間省略效果，目前還沒有專門的 CSS 樣式可以實(shí)現(xiàn)，不過可以模擬它，接著往下看

首先，復(fù)制一份文本，這里使用 ::before 偽類通過 content 生成

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

很明顯，這個(gè)時(shí)候兩段文本是連接在一起的

然后，給 :before 設(shè)置右浮動(dòng)，寬度設(shè)置成 50%

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

接著，給 :before 設(shè)置超出截?cái)?/span>

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

最后，把 :before 換成前面省略號(hào)的效果，可以用 direction 實(shí)現(xiàn)，關(guān)于 direction，平時(shí)可能沒怎么接觸，其實(shí)就是改變排版方向的，默認(rèn)是從左到右，省略號(hào)在右側(cè)，如果改成從右到左，那么省略號(hào)也會(huì)在左邊，所以

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

現(xiàn)在看看完成效果吧

有一點(diǎn)小問題，中間的省略號(hào)左邊的空隙有時(shí)候有點(diǎn)大，如下

這個(gè)是因?yàn)檫@個(gè)地方剛好換行了，所有空出了一小截。這里可以用文本兩端對(duì)齊簡單優(yōu)化一下

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

這樣就能保證最右端的文字是靠右的（當(dāng)然文本的間隙會(huì)略微增加一點(diǎn)~），效果如下

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

2. 超出滾動(dòng)效果

有時(shí)候，title 提示可能有點(diǎn)弱，不夠明顯，產(chǎn)品需要文本超出的時(shí)候，鼠標(biāo)放上去可以自動(dòng)滾動(dòng)起來，類似這樣的效果

如何實(shí)現(xiàn)的呢？其實(shí)借助上面的布局，這里實(shí)現(xiàn)就非常容易了，只需要對(duì) 文本B 做滾動(dòng)動(dòng)畫即可，關(guān)于 CSS3實(shí)現(xiàn)無縫滾動(dòng)，這里介紹一下實(shí)現(xiàn)：

要做到首尾無縫滾動(dòng)，首先需要復(fù)制一份相同的文本，這里使用 ::after 偽元素通過 content 生成

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

現(xiàn)在需要在一行顯示，不換行

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

可以看到，雖然不換行了，但是寬度還是父級(jí)的寬度，并沒有跟隨文字內(nèi)容，這時(shí)，可以設(shè)置 display: inline-block

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

關(guān)于寬度跟隨文字內(nèi)容，其實(shí)還可以用 width: max-content 實(shí)現(xiàn)，兼容性略差

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

接著，設(shè)置 animation 動(dòng)畫即可，只需要當(dāng) transform 位移到 自身一半50% 時(shí) 迅速歸位，就能達(dá)到無縫銜接的效果，如下

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

這里首尾的間隙是用 padding 實(shí)現(xiàn)的

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

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

唯一的缺陷是動(dòng)畫時(shí)間是固定的，如果文本很長，可能出現(xiàn)滾動(dòng)過快的問題

四、總結(jié)和說明

本文介紹了一種全新 CSS 自動(dòng)判斷多行文本的思路，并且?guī)?個(gè)人性化的小交互?？偟膩碚f，其實(shí)也沒用到太多的技巧（主要還是想象力），結(jié)構(gòu)還不算復(fù)雜，相信一步步看下來不會(huì)有很大的難度。

重點(diǎn)依舊是上面的布局部分，布局出來了，下面很多擴(kuò)展效果也就迎刃而解了。由于只用到了 CSS2 相關(guān)特性（max-height、文本截?cái)嗟龋?，兼容性也是棒棒的，?shí)測可以兼容到 IE7+（全兼容，放心使用），后面的超出滾動(dòng)效果兼容到 IE10+， 現(xiàn)在總結(jié)一下實(shí)現(xiàn)重點(diǎn)：

1. 轉(zhuǎn)換思路，節(jié)點(diǎn)復(fù)制是一個(gè)好辦法
2. 通過 max-height 可以判斷單行和多行
3. 靈活運(yùn)用 CSS 障眼法 層級(jí)覆蓋和超出隱藏
4. direction：rtl 可以實(shí)現(xiàn)前置省略號(hào)的效果
5. 中間省略號(hào)可以用兩段文本拼接的方式模擬
6. 寬度跟隨文本自適應(yīng)可以用 inline-block 實(shí)現(xiàn)
7. 無縫滾動(dòng)效果可以用位移 -50% 來實(shí)現(xiàn)

好了，這樣一個(gè)成本低廉，又非常人性化的小功能，趕緊用起來吧。如果大家覺得不錯(cuò)的話，歡迎點(diǎn)贊、收藏、轉(zhuǎn)發(fā)???~

References

[1] [codepen auto title] https://codepen.io/xboxyan/pen/WNppXxx

[2] [codepen auto title list] https://codepen.io/xboxyan/pen/eYvveBe

[3] [codepen auto middle ellipsis] https://codepen.io/xboxyan/pen/VwpPNbm

[3] [codepen auto scroll list] https://codepen.io/xboxyan/pen/ZEeerBb

1. /隱藏不留痕跡
2. <input type="hidden" />