建站
咨詢
售后
建站咨詢
新聞中心
實(shí)際效果可以查看底部「原文鏈接」，那么如何通過(guò) CSS 實(shí)現(xiàn)這一效果呢?
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)與策劃設(shè)計(jì),曲阜網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:曲阜等地區(qū)。曲阜做網(wǎng)站價(jià)格咨詢:13518219792
一、圖片加載失敗時(shí)的占位
現(xiàn)代瀏覽器(Chrome、Firefox) img 標(biāo)簽都支持偽元素了，不過(guò)只有當(dāng)圖片加載失敗的時(shí)候才能看到。
.avator::before{
content: '我是偽元素';
color: red;
}效果如下：
有了偽元素，要做一些事情就很方便了，比如將默認(rèn)的“占位圖”擠出去，設(shè)置偽元素高度為100%就行了，同時(shí)設(shè)置超出隱藏。
.avator{
width: 40px;
height: 40px;
overflow: hidden; /*記得超出隱藏*/
}
.avator::before{
content: '';
display: flex;
background: bisque;
height: 100%;
}效果如下：
二、alt 首字符占位
一般在使用 img 標(biāo)簽時(shí)都推薦加上 alt 屬性，用來(lái)描述圖片信息，也非常符合語(yǔ)義化。
然后在圖片加載失敗時(shí)，可以通過(guò) attr獲取到完整的 alt 信息。
.avator::before{
content: attr(alt); /* 獲取 alt 屬性 */
color: rgb(250, 84, 28);
}為了方便演示，這里暫時(shí)把超出隱藏打開(kāi)。
那么，如何只顯示第一個(gè)字符呢?
嘗試了一下::first-letter，發(fā)現(xiàn)不起作用，偽元素里面不能再用偽元素了；
.avator::before::first-letter{
/*無(wú)效*/
}需要換一種思路，比如增加字符間距，讓其余字符都處于容器之外;
.avator::before{
/**/
letter-spacing: 40px;
}效果如下：
這樣一來(lái)，首字符“x”確實(shí)處于視線之中了。
不過(guò)新問(wèn)題也來(lái)了，如何讓首字符水平垂直居中呢?
三、首字符水平垂直居中
垂直居中比較好辦。設(shè)置行高就行了。
.avator::before{
/**/
line-height: 40px;
}
水平居中貌似有些棘手，不過(guò)發(fā)揮你的奇思妙想，問(wèn)題還是可以解決的!
首先，由于寬度限制，可以把所有的字符強(qiáng)制換行，保證每個(gè)字符都處于單獨(dú)一行，首行也不另外。
.avator::before{
/**/
word-break: break-all; /*換行*/
}前面我們加了一個(gè)字符間距，但是字符間距是跟隨在字符后面的，所以第一個(gè)字符的前面是沒(méi)有間距的。為了保持首行左右平衡，所以手動(dòng)加上同樣的間距，這里采用text-indent來(lái)實(shí)現(xiàn)。
.avator::before{
/**/
text-indent: 40px; /*首行縮進(jìn)*/
}這樣對(duì)于首行來(lái)說(shuō)，其實(shí)是左右邊距是一樣的。接下來(lái)，通過(guò) flex 布局居中就可以了。
.avator::before{
/**/
display: flex;
justify-content: center; /*水平居中*/
}對(duì)于英文字母來(lái)說(shuō)，可能需要轉(zhuǎn)成大寫；
.avator::before{
/**/
text-transform: capitalize; /*首字母大寫*/
}然后超出隱藏看看效果吧！
四、特殊符號(hào)的影響
后來(lái)測(cè)試中，發(fā)現(xiàn)了另外一個(gè)問(wèn)題，當(dāng) alt 中有一些特殊標(biāo)點(diǎn)符號(hào)時(shí)，首字符會(huì)消失不見(jiàn)。
打開(kāi)隱藏其實(shí)是這樣的：
是不是看著一團(tuán)糟?其實(shí)就是一些閉尾標(biāo)點(diǎn)惹的禍!比如這里的(，默認(rèn)情況下是不允許出現(xiàn)在一行的末尾的，所以強(qiáng)制換到了下一行，導(dǎo)致整個(gè)布局錯(cuò)亂。為了解決這個(gè)問(wèn)題，可以使用一個(gè)比較冷門的 CSS 屬性 line-break - CSS(層疊樣式表) | MDN (mozilla.org)[1] 來(lái)解決，有興趣的可以參考張?chǎng)涡竦倪@篇文章：CSS line-break屬性與中文標(biāo)點(diǎn)換行 [2]。
.avator::before{
/**/
line-break: anywhere; /*任意地方都換行*/
}
這下就沒(méi)問(wèn)題了，都是整整齊齊的換行~
下面整理一下，附上完整代碼：
xboxyan
xboxyan
前端偵探
體驗(yàn)設(shè)計(jì)部
.list{
list-style: none;
padding: 0;
}
.avator{
width: 40px;
height: 40px;
border-radius: 8px;
overflow: hidden;
background: bisque;
}
.avator::before{
content: attr(alt);
display: flex;
width: 100%;
height: 100%;
background-color: bisque;
text-transform: uppercase;
line-height: 40px;
letter-spacing: 40px;
text-indent: 40px;
justify-content: center;
text-align: center;
/* word-break: break-all; */
line-break: anywhere;
color: rgb(250, 84, 28);
}
.item{
display: flex;
align-items: center;
gap: 15px;
height: 64px;
font-size: 18px;
}效果如文章開(kāi)頭所示，有需要的可以直接用起來(lái)了；
或者訪問(wèn)線上鏈接 CSS avator(codepen.io)[3] 或者 CSS avator (juejin.cn)[4]。
五、總結(jié)一下
以上就是本文的全部?jī)?nèi)容了，非常簡(jiǎn)單實(shí)用的一個(gè)小功能，下面簡(jiǎn)單總結(jié)一下：
現(xiàn)代瀏覽器支持 img 偽元素了，并且只有在資源加載失敗時(shí)才可用，利用這一點(diǎn)可以設(shè)置圖片占位符。
偽元素通過(guò) attr 屬性可以獲取 img 標(biāo)簽屬性，推薦使用 alt。
偽元素不能再使用偽元素了。
增加字符的行間距可以在可視范圍內(nèi)僅看到一個(gè)字符。
垂直居中可以通過(guò)行高來(lái)實(shí)現(xiàn)。
水平居中可以通過(guò)首行縮進(jìn) 和 flex 居中實(shí)現(xiàn)。
部分特殊符號(hào)由于“避尾”或者“避首”特性，導(dǎo)致?lián)Q行布局錯(cuò)亂。
line-break 可以打破以上規(guī)則。
唯一的遺憾就是 Safari 不支持圖片偽元素，不過(guò)沒(méi)關(guān)系，不影響功能，也可以學(xué)到一些你可能不知道的小技巧。
參考資料
[1]line-break - CSS(層疊樣式表) | MDN (mozilla.org): https://developer.mozilla.org/zh-CN/docs/Web/CSS/line-break
[2]CSS line-break屬性與中文標(biāo)點(diǎn)換行 : https://www.zhangxinxu.com/wordpress/2021/02/css-line-break/
[3]CSS avator(codepen.io): https://codepen.io/xboxyan/pen/KKZjqrZ
[4]CSS avator (juejin.cn): https://code.juejin.cn/pen/7090835301370691620
文章題目：CSS實(shí)現(xiàn)頭像名稱首字符自動(dòng)占位
標(biāo)題URL：http://www.5511xx.com/article/djecjdp.html
