Safari不愧是新時(shí)代的 IE，各種 bug 層出不窮。比如有這樣一個(gè)多行省略打點(diǎn)的布局

div{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

這樣在文本超過(guò)三行的時(shí)候就會(huì)出現(xiàn)省略號(hào)

沒(méi)啥問(wèn)題，和正常瀏覽器一樣。但是這樣有個(gè)問(wèn)題，每行文字右端空隙太大，不美觀，如下

下面加上文本兩端對(duì)齊

div{
 /* */
 text-align: justify;
}

啪！bug 就出現(xiàn)了

image-20230311122556890

當(dāng)然，如果設(shè)計(jì)不介意的話，不使用文本兩端對(duì)齊也能簡(jiǎn)單規(guī)避這個(gè)問(wèn)題。

那有沒(méi)有什么辦法可以解決這個(gè)問(wèn)題呢？

一、為啥會(huì)有這個(gè)問(wèn)題

出現(xiàn)這個(gè) bug 的原因在于，這個(gè)省略號(hào)是自動(dòng)生成的，在Safari下似乎沒(méi)有受到文本兩端對(duì)齊的作用，所以導(dǎo)致和文本發(fā)生了重疊， 貌似是忘記了對(duì)這個(gè)省略號(hào)進(jìn)行對(duì)齊處理。

因此，如果這個(gè)省略號(hào)是自己定義的，本來(lái)就在頁(yè)面中，當(dāng)然就不會(huì)有這個(gè)問(wèn)題了。

要實(shí)現(xiàn)超過(guò)指定行數(shù)出現(xiàn)省略號(hào)有幾個(gè)實(shí)現(xiàn)點(diǎn)：

1. 超過(guò)指定行數(shù)截?cái)辔谋?/li>
2. 右下角環(huán)繞的省略號(hào)
3. 在字?jǐn)?shù)較少時(shí)自動(dòng)隱藏省略號(hào)

之前在這兩篇文章中都用到了相關(guān)技巧

• CSS 實(shí)現(xiàn)多行文本“展開收起”
• CSS 實(shí)現(xiàn)文本"不定行數(shù)"截?cái)?

有興趣的可以回顧一下，本文相當(dāng)于這個(gè)技巧的另一個(gè)應(yīng)用

二、超過(guò)指定行數(shù)截?cái)辔谋?/h2>

前面說(shuō)了，通過(guò)-webkit-line-clamp?設(shè)置的超出文本在Safari下有 bug，所以需要借助其他方式來(lái)實(shí)現(xiàn)。

拋開省略號(hào)，其實(shí)這個(gè)比較好實(shí)現(xiàn)，給一個(gè)固定最大高度，超出就通過(guò)overflow:hidden隱藏就行了。

假設(shè)布局是這樣的

<div class="con">
  <div class="txt">
    歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如這篇文章，safari又出bug了，省略號(hào)和文本重疊了，如何修復(fù)這個(gè)問(wèn)題呢？一起看看吧
  </div>
</div>

為了方便行數(shù)控制，可以更加行高來(lái)確定最大高度，比如 3 行，那么最大高度就是1.5 * 3 = 4.5em

.txt{
  line-height: 1.5; 
  max-height: 4.5em; /*1.5 * 3*/
  overflow: hidden;
}

這樣整個(gè)文本就不會(huì)超出 3 行了，只是現(xiàn)在還沒(méi)有省略號(hào)，如下

如何添加省略號(hào)呢？接著往下看

二、右下角環(huán)繞的省略號(hào)

這是一個(gè)典型的文本環(huán)繞布局。提到環(huán)繞，就不得不用上浮動(dòng)float。

我們通過(guò)偽元素生成省略號(hào)，并設(shè)置浮動(dòng)

.txt::before{
    content: '...';
    float: left;
}

為了方便演示，這里給偽元素添加了紅色背景，如下

然后設(shè)置右浮動(dòng)

.txt::before{
    content: '...';
    float: right;
}

這樣省略號(hào)跑到了右上角

然后，將省略號(hào)移動(dòng)到右下角，可以用flex對(duì)齊實(shí)現(xiàn)

.txt::before{
    content: '...';
    float: right;
    height: 100%;
    display: flex;
    align-items: flex-end;/*居底對(duì)齊*/
}

可以看到，省略號(hào)已經(jīng)到了右下角，但是沒(méi)有環(huán)繞效果

如何讓這個(gè)省略號(hào)到右下角呢？這就需要用到 CSS shapes 布局[2]。

shapes?布局可以很輕易的實(shí)現(xiàn)任意形狀的環(huán)繞效果。我們這個(gè)環(huán)繞效果很簡(jiǎn)單，只需要利用到 shape-outside:inset()就可以了，表示以自身為邊界，然后上、右、下、左四個(gè)方向分別向內(nèi)縮進(jìn)的距離，也可以想象成在右下角挖個(gè)孔，是不是就實(shí)現(xiàn)了右下角環(huán)繞布局了？具體實(shí)現(xiàn)如下

.txt::before{
    shape-outside: inset(calc(100% - 1em) 0 0 0);
    margin-left: 2px;
}

效果如下

最后去除背景，看看效果

Kapture 2023-03-11 at 15.11.38

已經(jīng)很完美了，只是這個(gè)省略號(hào)一直都在

四、自動(dòng)隱藏省略號(hào)

可以試試之前用過(guò)的 “CSS 障眼法”。

原理很簡(jiǎn)單，就是用一個(gè)足夠大的色塊蓋住省略號(hào)，設(shè)置絕對(duì)定位后（不設(shè)置left和top），色塊是跟隨內(nèi)容文本的，

關(guān)于這個(gè)絕對(duì)定位的小技巧，可以參考之前這篇文章：你可能不知道的絕對(duì)定位[3]

所以在文字較多時(shí)，色塊也跟隨文本擠下去了，實(shí)現(xiàn)如下

.txt::after{
    content: '';
    position: absolute;
    width: 999vh;
    height: 999vh;
    background: #fff;
}

效果是這樣的

Kapture 2023-03-11 at 16.26.20

然后將這個(gè)色塊換成和背景相同的顏色就可以了

Kapture 2023-03-11 at 16.30.29

這樣就不會(huì)出現(xiàn)省略號(hào)重疊的情況了，看下兩者對(duì)比（Safari下）

image-20230311164124148

完整 demo 可以訪問(wèn)以下任意鏈接（注意使用 Safari 瀏覽器，iOS也行）：

• CSS auto clamp (juejin.cn)[4]
• CSS auto clamp (runjs.work)[5]

五、總結(jié)一下

這樣就相對(duì)完美的解決了 Safari 下的小 bug，雖然實(shí)現(xiàn)不算特別復(fù)雜，但還是有很多小技巧的，下面總結(jié)一下

1. Safari 下在多行打點(diǎn)時(shí)如果設(shè)置了文本兩端對(duì)齊，會(huì)導(dǎo)致省略號(hào)和文本重疊
2. 原因在于省略號(hào)是自動(dòng)加上的，Safari 貌似忘記了對(duì)這個(gè)省略號(hào)進(jìn)行對(duì)齊處理，需要手動(dòng)添加省略號(hào)
3. 多行文本截?cái)嗫梢越柚?nbsp;max-height 和overflow:hidden
4. 省略號(hào)右下角環(huán)繞布局可以接著右浮動(dòng)和shapes布局
5. 自動(dòng)隱藏省略號(hào)可以用一個(gè)絕對(duì)定位的色塊遮擋實(shí)現(xiàn)
6. 適當(dāng)積累一些 CSS 奇技淫巧，有時(shí)候會(huì)幫上大忙

當(dāng)然，這個(gè)方式也有局限性，僅限于純色背景。另外，我也嘗試了容器查詢，發(fā)現(xiàn)并沒(méi)有想象中的那么好用，有興趣的小伙伴可以嘗試一下。

參考資料

[1]CSS 實(shí)現(xiàn)多行文本“展開收起” - 掘金 (juejin.cn): https://juejin.cn/post/6963904955262435336

[2]CSS shapes 布局: https://developer.mozilla.org/zh-CN/docs/Web/CSS/shape-outside

[3]你可能不知道的絕對(duì)定位: https://juejin.cn/post/7204633786934607929

[4]CSS auto clamp (juejin.cn): https://code.juejin.cn/pen/7209206349798834235

[5]CSS auto clamp (runjs.work): https://runjs.work/projects/77766da9480c43cc