Question

我正在尝试获取一个在不需要时不可见的滚动条，但在需要时不会压缩内容。 auto以错误的方式与text-overflow: ellipsis进行互动，即使文本没有溢出max-width，最长的行也会省略。

overflow-y: auto搜索内容并在滚动条出现时显示省略号。 overflow-y: scroll没有这个问题，但滚动条始终可见。滚动条使div更宽，而不是占用div中的空间并压缩文本。

当滚动条出现时，如何在不压缩文本和获取不需要的省略号的情况下获得overflow: auto的优势？我真的想避免使用Javascript，所以请不要使用脚本。

Answer 1

文本省略号行为将显示，因为它在其父级中碰撞以增长它，直到它达到最大宽度。

为避免这种情况，您可以检查父级的宽度，并在达到最大宽度后通过类触发它。

基本上，通过jQuery，你可以做这样的事情：

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

    function () {

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

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

Answer 2

我想要一个在需要时出现的滚动条。如果你不介意jquery你可以使用纤细的卷轴。它非常简单易用，我相信它会增加你需要的东西

Check it here

以下是slimscroll代码的示例：

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

希望你可以使用它，因为它解决了它真的很容易

Answer 3

我最近也遇到过这个问题，只是出于好奇，我潜入了这个问题并找到了解决这个问题的原因。

仅在您的示例中，您可以观察到div的垂直滚动条宽度为227.33px，您可以使用chrome的inspect元素检查这一点，而div的滚动条宽度不是244.313。因此，当div中出现垂直滚动条时，div中文本可以出现的区域的大小会变小，因此即使div的宽度足以包含那么多文本，那么为什么它会消耗文本。实际上，可以在div中写入文本的区域变小，即“div的宽度” - “垂直滚动条的宽度”。

当你设置overflow-y = scroll时，带有和不带滚动条的div的宽度是相同的，因此它不会超过div中的文本。当你设置overflow-y = auto时，div的文本区域变小，滚动条没有滚动条区域变得与div的实际宽度*高度相同，因此它使用垂直滚动条在div内部文本，而没有滚动条没有经过。

因此，要解决此问题，您可以在悬停上设置工具提示，或者可以将宽度增加一些像素。但同样这不是文本溢出的问题：省略号功能。省略号检查可以写入文本的区域的宽度，并将其与要写入的文本的宽度进行比较。

使垂直滚动条向div添加宽度而不是压缩内容

3 个答案: