建站
咨詢
售后
建站咨詢
新聞中心
Safari不愧是新時(shí)代的 IE，各種 bug 層出不窮。比如有這樣一個(gè)多行省略打點(diǎn)的布局
div{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
這樣在文本超過三行的時(shí)候就會(huì)出現(xiàn)省略號(hào)
沒啥問題，和正常瀏覽器一樣。但是這樣有個(gè)問題，每行文字右端空隙太大，不美觀，如下
下面加上文本兩端對(duì)齊
div{
/* */
text-align: justify;
}
啪！bug 就出現(xiàn)了
image-20230311122556890
當(dāng)然，如果設(shè)計(jì)不介意的話，不使用文本兩端對(duì)齊也能簡單規(guī)避這個(gè)問題。
那有沒有什么辦法可以解決這個(gè)問題呢？
一、為啥會(huì)有這個(gè)問題
出現(xiàn)這個(gè) bug 的原因在于，這個(gè)省略號(hào)是自動(dòng)生成的，在Safari下似乎沒有受到文本兩端對(duì)齊的作用，所以導(dǎo)致和文本發(fā)生了重疊， 貌似是忘記了對(duì)這個(gè)省略號(hào)進(jìn)行對(duì)齊處理。
因此，如果這個(gè)省略號(hào)是自己定義的，本來就在頁面中，當(dāng)然就不會(huì)有這個(gè)問題了。
要實(shí)現(xiàn)超過指定行數(shù)出現(xiàn)省略號(hào)有幾個(gè)實(shí)現(xiàn)點(diǎn)：
- 超過指定行數(shù)截?cái)辔谋?/li>
- 右下角環(huán)繞的省略號(hào)
- 在字?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)用
二、超過指定行數(shù)截?cái)辔谋?/h2>
前面說了，通過-webkit-line-clamp?設(shè)置的超出文本在Safari下有 bug，所以需要借助其他方式來實(shí)現(xiàn)。
拋開省略號(hào)，其實(shí)這個(gè)比較好實(shí)現(xiàn)，給一個(gè)固定最大高度，超出就通過overflow:hidden隱藏就行了。
假設(shè)布局是這樣的
歡迎關(guān)注前端偵探，這里有一些有趣的、你可能不知道的HTML、CSS、JS小技巧技巧，比如這篇文章，safari又出bug了，省略號(hào)和文本重疊了，如何修復(fù)這個(gè)問題呢？一起看看吧
為了方便行數(shù)控制，可以更加行高來確定最大高度，比如 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)在還沒有省略號(hào)，如下
如何添加省略號(hào)呢？接著往下看
二、右下角環(huán)繞的省略號(hào)
這是一個(gè)典型的文本環(huán)繞布局。提到環(huán)繞，就不得不用上浮動(dòng)float。
我們通過偽元素生成省略號(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)到了右下角，但是沒有環(huán)繞效果
如何讓這個(gè)省略號(hào)到右下角呢？這就需要用到 CSS shapes 布局[2]。
shapes?布局可以很輕易的實(shí)現(xiàn)任意形狀的環(huán)繞效果。我們這個(gè)環(huá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)
可以試試之前用過的 “CSS 障眼法”。
原理很簡單，就是用一個(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 可以訪問以下任意鏈接（注意使用 Safari 瀏覽器，iOS也行）：
- CSS auto clamp (juejin.cn)[4]
- CSS auto clamp (runjs.work)[5]
五、總結(jié)一下
這樣就相對(duì)完美的解決了 Safari 下的小 bug，雖然實(shí)現(xiàn)不算特別復(fù)雜，但還是有很多小技巧的，下面總結(jié)一下
- Safari 下在多行打點(diǎn)時(shí)如果設(shè)置了文本兩端對(duì)齊，會(huì)導(dǎo)致省略號(hào)和文本重疊
- 原因在于省略號(hào)是自動(dòng)加上的，Safari 貌似忘記了對(duì)這個(gè)省略號(hào)進(jìn)行對(duì)齊處理，需要手動(dòng)添加省略號(hào)
- 多行文本截?cái)嗫梢越柚?nbsp;max-height 和overflow:hidden
- 省略號(hào)右下角環(huán)繞布局可以接著右浮動(dòng)和shapes布局
- 自動(dòng)隱藏省略號(hào)可以用一個(gè)絕對(duì)定位的色塊遮擋實(shí)現(xiàn)
- 適當(dāng)積累一些 CSS 奇技淫巧，有時(shí)候會(huì)幫上大忙
當(dāng)然，這個(gè)方式也有局限性，僅限于純色背景。另外，我也嘗試了容器查詢，發(fā)現(xiàn)并沒有想象中的那么好用，有興趣的小伙伴可以嘗試一下。
參考資料
[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
本文題目：又出bug了？Safari下文字和省略號(hào)重疊問題
網(wǎng)站鏈接：http://m.fisionsoft.com.cn/article/cdhcpoe.html
