大概需求和情況是這樣的.今天提交的代碼自我感覺是比較好的一版了,代碼質(zhì)量和個(gè)人編程知識(shí)/經(jīng)驗(yàn)等緊密相關(guān),不求最好,但求better and better.在這里做一個(gè)總結(jié)文。
當(dāng)內(nèi)容超出父級(jí)元素寬度，在未設(shè)置white-space:nowrap時(shí)會(huì)自動(dòng)換行，設(shè)置了white-space:nowrap樣式又不能關(guān)聯(lián)到滾動(dòng)條延伸的部分，解決方案如下：
1、在父級(jí)元素添加white-space:nowrap屬性；
2、計(jì)算（每一行）內(nèi)容寬度；
a、將內(nèi)容拆分，包括縮進(jìn)、圖片和文字。
b、利用《又談?chuàng)Q行情況處理》中在body末尾添加非換行dom元素計(jì)算文字寬度。
c、疊加拆分的小塊寬度為總寬度。
3、去掉父級(jí)元素的white-space:nowrap屬性；
4、取2中最大寬度，設(shè)置成父級(jí)元素的寬度（最好在該精確寬度的基礎(chǔ)上增加6px-8px的寬度預(yù)留給滾動(dòng)條，一是滿足滾動(dòng)條出現(xiàn)，二是也不會(huì)貼邊）。
該方法優(yōu)點(diǎn)（與之前幾種方案相比）：
1、寬度計(jì)算準(zhǔn)確。
2、性能穩(wěn)定，沒有之前循環(huán)“試探”的過程，遍歷一遍節(jié)點(diǎn)即可完成。
What's more, 工作總是在種種業(yè)務(wù)場(chǎng)景之下的，像上面解決的這個(gè)問題就是。
更多信息請(qǐng)查看IT技術(shù)專欄
公眾號(hào)
事業(yè)單位
當(dāng)前位置：
公考類
招聘類
各類考試