CSS有個overflow，為了讓顯示不下的內(nèi)容滾動顯示，通常會加上：
overflow: scroll;/* 或者 */overflow: auto;

以前我天真地以為，他們的區(qū)別僅僅是，一個始終顯示滾動條（overflow: scroll
），一個按需顯示滾動條（overflow: auto
）。直到遇到了一個自適應(yīng)寬度同時(shí)自動顯示滾動條的場景，才發(fā)現(xiàn)：
overflow: scroll
情況下，內(nèi)容自動撐開容器的寬度不包括滾動條，相當(dāng)于滾動條是一個和內(nèi)容并列顯示的組件。

overflow: scroll

而overflow: auto
情況下，內(nèi)容撐開容器的寬度包括滾動條，即使用whitespace: no-wrap;
撐開容器至正好顯示所有內(nèi)容時(shí)，如果有滾動條，則滾動條會覆蓋在內(nèi)容上方，導(dǎo)致內(nèi)容寬度再次被縮小，然后出現(xiàn)省略號。由此推測渲染順序：自適應(yīng)寬度 → 根據(jù)高度顯示滾動條 → 重新計(jì)算內(nèi)部元素寬度

這里不會再次自適應(yīng)，因此出現(xiàn)了內(nèi)容顯示不全的情況。

overflow: auto

總結(jié)一下就是，如果寬度是由內(nèi)容自適應(yīng)撐開的，則overflow: auto;
帶來的滾動條會占用內(nèi)容的一部分寬度，導(dǎo)致內(nèi)容顯示不全。
那么遇到這種情況，最直接的解決辦法就是，強(qiáng)制顯示滾動條，這也是我在StackOverflow上找到的回答。然而我并不想就這樣屈服，而且在Windows上多顯示個不必要的滾動條真的很丑，于是我又使用了一個不走尋常路的方法：
動態(tài)獲取滾動條的寬度：var scrollbarWidth = container.offsetWidth - container.clientWidth;// 如果沒有滾動條則為0// 否則為滾動條寬度

有滾動條的時(shí)候需要在內(nèi)容右側(cè)加個padding
。測試發(fā)現(xiàn)，如果直接把padding加在內(nèi)容元素上，則內(nèi)容文字顯示全了，但是背景在右側(cè)空出了一塊。于是換個思路，用一個占位元素來撐開容器，然后再顯示真正想要的內(nèi)容。
占位元素怎么做？其實(shí)很簡單，就是把當(dāng)前容器復(fù)制一份，但是給它設(shè)置：overflow: hidden; height: 0;
，不受滾動條影響寬度，同時(shí)高度為0不可見，然后用JavaScript把第1步計(jì)算的滾動條寬度作為padding-right
加上去，這樣占位元素的寬度就是我們最后想要的容器寬度，可見部分的內(nèi)容再自適應(yīng)就完全沒有問題了。