檢查內容是否溢出

Question

我需要知道我的內容何時溢出我的分區。如果確實如此，我會放入一個鏈接，在所有內容的新窗口中打開頁面。

乾杯，

DalexL

Answer 1

這是一個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); 

Answer 2

如果創建這樣的結構：

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

然後溢出發生時inner的寬度或高度超過的outer因爲外假定的尺寸視口和內部呈現顯示所有內容所需的最小寬度和高度。

您可以將outer標記爲visibility: hidden，以使其佈局但不顯示。

如果內容包含position: fixed內容，那麼該部分將不會被考慮（並且在CSS 2上甚至不會被裁剪）。

Answer 3

使用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 4

沒有jQuery的答案：

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