使垂直滚动条添加宽度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而不是压缩内容

回答

相关问题