Question

我需要知道我的内容何时溢出我的div。如果是这样，我将放置一个链接，在一个包含所有内容的新窗口中打开页面。

干杯，

DalexL

Answer 1

使用jQuery和Marquee Text When Text Overflows：

$('div').each(function(){
    var $this = $(this);
    if ($this.get(0).scrollHeight > $this.height()) {
        $this.after('<a href="#" target="new">Read More</a>');
    }
});

http://jsfiddle.net/eF7jf/

Answer 2

无jQuery回答：

if( elements.scrollHeight > element.clientHeight )
  alert('content-overflow')//not to be confused with stackoverflow

Answer 3

如果您创建这样的结构：

<div id="outer" style="overflow: auto">
  <div id="inner">
    content
  </div>
</div>

然后当inner的宽度或高度超过outer时，会发生溢出，因为外部假定视口的尺寸，而内部则假定显示所有内容所需的最小宽度和高度。

您可以将outer标记为visibility: hidden，以使其布局但不显示。

如果内容包含position: fixed内容，那么该部分将不会被考虑（并且在CSS 2上甚至不会被剪裁）。

Answer 4

这是一个适合文本宽度和高度的jquery插件：

(function($) {
    $.fn.fitText = function(options) {
        options = $.extend({
            width: 0,
            height: 0
        }, options);

        $(this).each(function() {
            var elem = $(this);
            if (options.height > 0) {
                while (elem.height() > options.height) {
                    elem.text(elem.text().substring(0, (elem.text().length - 4)) + 'YourLink');
                }
            }
            if (options.width > 0) {
                while (elem.width() > options.width) {
                    elem.text(elem.text().substring(0, (elem.text().length - 4)) + 'YourLink');
                }
            }
        });
    }
})(jQuery);

检查内容是否溢出

4 个答案: