Make vertical scrollbar add width to div instead of compressing contents

Question

I am trying to get a scrollbar that will be invisible when not needed, but that will not squish the contents when it is needed. auto interacts with text-overflow: ellipsis in a bad way, such that even when the text does not overflow the max-width, the longest lines are ellipsis'ed.

Here is an example: http://jsfiddle.net/Zchx5/1/

overflow-y: auto squishes the contents and makes the ellipses appear when the scrollbar appears. overflow-y: scroll does not have that problem, but the scrollbar is always visible. The scrollbar makes the div wider instead of taking up space inside the div and squashing the text.

How can I have the advantages of overflow: auto without squishing the text and getting undesired ellipses when the scrollbar appears? I really want to avoid Javascript so please no scripts.

Answer 1

I you want a scroll bar that appears when ITS NEEDED. And if your dont mind jquery you can use slim scroll. Its really really simple to use and im sure it will add what you need

Check it here

Here is an example of slimscroll code:

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

Hope you can use it this because its solves it really easy

Answer 2

text-ellipsis behavior will show up since it bumps in its parent in order to grow it untill it reaches max-width.

To avoid it , you can check width of parent and trigger it to child via a class once max-width is reached.

Basicly, via jQuery , you can do such thing :

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

    function () {

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

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

Answer 3

I also faced this issue recently, just out of curiosity I dived into this problem and found the reason why this issue is occurring.

In your example only, you can observe that with vertical scrollbar width of the div is 227.33px, you can check this using inspect element of chrome, and without scrollbar width of the div is 244.313. So when vertical scrollbar appears in the div, area in which text can appear in the div becomes smaller in size and hence to you it seems that even though the width of the div is sufficient to contain that much text then why it is elapsing the text. Actually, the area in which text can be written in the div becomes smaller i.e. of size “width of div” – “width of vertical scrollbar”.

When you set overflow-y=scroll, width of the div with and without scrollbar is same and hence it is not elapsing the text inside div. When you set overflow-y=auto, text able area of the div becomes smaller with scrollbar and without scrollbar area becomes same as actual width*height of div and hence it is elapsing the text inside div with vertical scrollbar and not elapsing without scrollbar.

So to solve this issue, you can set tooltip on hover OR you can increase the width by some pixels. But as such it is not a problem of text-overflow:ellipsis feature. Ellipsis checks width of the area in which text can be written and compares it with the width of the text to be written.