什麼是自適應寬度

來源:互聯網
上載者:User

  大概需求和情況是這樣的.今天提交的代碼自我感覺是比較好的一版了,代碼品質和個人編程知識/經驗等緊密相關,不求最好,但求better and better.在這裡做一個總結文。

  當內容超出父級元素寬度,在未設定white-space:nowrap時會自動換行,設定了white-space:nowrap樣式又不能關聯到捲軸延伸的部分,解決方案如下:

  1、在父級元素添加white-space:nowrap屬性;

  2、計算(每一行)內容寬度;

  a、將內容拆分,包括縮排、圖片和文字。

  b、利用《又談換行情況處理》中在body末尾添加非換行dom元素計算文字寬度。

  c、疊加拆分的小塊寬度為總寬度。

  3、去掉父級元素的white-space:nowrap屬性;

  4、取2中最大寬度,設定成父級元素的寬度(最好在該精確寬度的基礎上增加6px-8px的寬度預留給捲軸,一是滿足捲軸出現,二是也不會貼邊)。

  該方法優點(與之前幾種方案相比):

  1、寬度計算準確。

  2、效能穩定,沒有之前迴圈“試探”的過程,遍曆一遍節點即可完成。

  What's more, 工作總是在種種業務情境之下的,像上面解決的這個問題就是。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.