什么是自適應寬度

字號:


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