使垂直滾動條添加寬度div而不是壓縮內容

我想獲得一個滾動條，當不需要時將不可見，但不會在需要時擠壓內容。 auto以不良方式與text-overflow: ellipsis交互，因此即使文本沒有溢出max-width，最長的行也會被省略。使垂直滾動條添加寬度div而不是壓縮內容

下面是一個例子：http://jsfiddle.net/Zchx5/1/

overflow-y: auto squishes內容並且使得滾動條上出現時的省略號出現。 overflow-y: scroll沒有這個問題，但滾動條總是可見的。滾動條使div更寬，而不是佔用div內的空間並壓縮文本。

如何在不滾動文字的情況下獲得overflow: auto的優勢，並且在滾動條出現時獲取不需要的省略號？我真的很想避免使用Javascript，所以請不要使用腳本。

來源

2014-02-16 user3286380

http://jsfiddle.net/eZZLa/沒有經過測試的跨瀏覽器解決方案，但這是一個開始。 – Nit

文本省略行爲將顯示出來，因爲它在其父文件中碰撞以便增長，直到達到最大寬度。

爲了避免這種情況，您可以檢查父級的寬度，並在達到最大寬度後通過類將其觸發到子級。

基本上，通過jQuery，你可以做這樣的事情：

var empixel = $("hr.gabari"); 
    $("div.better").each(

    function() { 

     if ($(this).innerWidth() > empixel.innerWidth()) { 
      $(this).addClass("ellipsis"); 
     } 
    });

http://jsfiddle.net/Zchx5/9/

來源

2014-02-16 22:20:45

不完全。正如我在我的問題中所說的，「即使文本沒有溢出」最大寬度「，最長的行也有橢圓」。當文本溢出最大寬度時我想要橢圓。現在，它們總是在垂直滾動條顯示時顯示。 – user3286380

白色空間：prewrap可以幫助我猜 –

我不能在div中包裝，所以它必須是'nowrap'。 – user3286380

我想要ITS需要的時候出現滾動條。如果你不介意jQuery，你可以使用苗條滾動。它真的很簡單易用，我確定它會增加你所需要的

Check it here

這裏是slimscroll代碼的例子：

$(document).ready(function() { 
     $('#DivIDThatYouWantScrollOn').slimScroll({ height: '200px' }); 
    });

希望你能因爲它解決它真正使用它這個容易

來源

2014-02-16 22:25:15

如果我在這個地方使用它，我將不得不在任何地方使用它，所以它必須是最後的手段。（還是）感謝你的建議。 – user3286380

完全沒有問題，它是一個非常方便的「最後的選擇」解決方案解決方案:) –

我最近也遇到過這個問題，只是出於好奇心，我潛入這個問題，發現這個問題發生的原因。

僅在您的示例中，您可以觀察到，使用垂直滾動條div的寬度爲227.33px，可以使用chrome的檢查元素來檢查此情況，並且沒有滾動條div的寬度爲244.313。因此，當垂直滾動條出現在div中時，文本可以出現在div中的區域變得更小，因此對於您來說，即使div的寬度足以包含那麼多的文本，那麼爲什麼它會流逝文本。實際上，文本可以寫入div的區域變得更小，即大小「div的寬度」 - 「垂直滾動條的寬度」。

當您設置overflow-y = scroll時，帶有和不帶滾動條的div的寬度是相同的，因此它不會經過div內的文本。當你設置overflow-y = auto時，div的文本可用區域隨着滾動條變小，沒有滾動條區域變得與div的實際寬度*高度相同，因此它使用垂直滾動條在div內傳遞並且不經過沒有滾動條。

所以要解決這個問題，你可以設置懸停的工具提示或者你可以增加一些像素的寬度。但正因爲如此，它不是文本溢出的問題：省略號功能。省略號檢查可以寫入文本的區域的寬度，並將其與要寫入的文本的寬度進行比較。

來源

2016-01-22 15:33:09

使垂直滾動條添加寬度div而不是壓縮內容

回答

相關問題