检查Javascript是否存在滚动条？

Question

我正在构建一个有趣的小便笺应用程序，有时会发生这种情况：

（这是因为第一个单词比笔记的宽度宽。）

有没有办法检查滚动条是否与Javascript一起出现？如果我可以这样做，我可以调整音符大小，直到它包含没有滚动条的文本。

Answer 1

如果CSS3属性对于其容器来说太大，它将会破坏一个单词：

#selector {  
    word-wrap: break-word;  
}

word-wrap: normal;切换样式

这基本上适用于所有浏览器，不管你信不信，对IE5的支持可以追溯到IE5。感谢Louis Lazaris的帖子Word-Wrap: A CSS3 Property That Works in Every Browser。

Answer 2

这是一种完成OP要求的方法，如果它有一个滚动条直到不再有一个div来扩大div：

var autoWiden = function ( elem ) {
    var checkForScroll = function() {
            var tsl;

            elem.scrollLeft += 10; // try to scroll
            tsl = elem.scrollLeft; // will be 0 if no scroll bar
            elem.scrollLeft = 0;   // reset scroll

            return tsl;
        };

    while (checkForScroll() > 0) {
        elem.style.width = (elem.offsetWidth + 10) + 'px';
    }
};

See example →

Answer 3

为了获得最佳的跨浏览器支持，我建议使用自动换行方法，并为元素提供设置宽度（100％或某些像素宽度），以使其不会变宽。这应该提供最好的解决方案。

你也可以设置overflow-x：hidden;简单地隐藏滚动条，但它在IE7 / 8中不起作用，也会导致溢出的文本不显示而不是包装，这可能不是你想要的。

Answer 4

我在类似情况下所做的是将文本附加到隐藏可见性的临时元素，测量它，如果太大，则执行某些操作来解决它（可能包括手动包装插入BR的文本，或者只是加宽你最终将文本放入的最后一个元素）。这比使用自动换行提供了更多的控制：break-word;