2011-07-23 12 views
3

私のコンテンツが私のdivをオーバーフローするときを知る必要があります。そうであれば、私はすべてのコンテンツを含む新しいウィンドウでページを開くためのリンクに配置されます。コンテンツがオーバーフローするかどうかを確認してください。

乾杯、

DalexL

+0

これは助けるかもしれません:http://stackoverflow.com/questions/835684/marquee-text-when-text-overflows –

答えて

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); 
2

あなたは、このような構造を作成する場合:

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

innerの幅または高さがouterの外側はの寸法を前提としているためという超えたときにオーバーフローが発生しましたビューポートとインナーは、すべてのコンテンツを表示するのに必要な最小の幅と高さを想定しています。

outervisibility: hiddenとマークするとレイアウトできますが表示されません。

コンテンツにposition: fixedのコンテンツが含まれている場合、その部分は考慮されません(CSS 2はクリップされません)。

+0

質問はJavascriptとしてタグ付けされました! – Gerben

+2

@Gerben、展開してください。この質問は、DIVのHTMLコンテンツについて明らかに話しています。最初のタグはどのようにjavascriptに関連していますか? –

9
の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/

+0

これは受け入れられた答えとは異なり、この質問に答えます。私のためにすぐに働きました。 –

+0

優れた、スクロールの高さのチェックは考えられませんでした。 – Ripside

+0

パーフェクトでき​​れいな答え –

6

なしjQueryの答え:

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

IE6とIE7がscrollHeightに間違った値を与えることがあるようです。あなたは警告しています。 – Gerben

関連する問題