知道什麼溢出：隱藏已隱藏

Question

我想知道是否有任何方式可以調用和使用什麼overflow:hidden已隱藏。

爲了澄清我的意思，在this example我想知道「這是隱藏的」是div的隱藏部分。

這甚至可能嗎？你會如何處理它？

我已經標記了jQuery的問題，但當然不管做什麼工作都很好，純粹的CSS或Javascript將會很好。

在此先感謝！

Answer 1

試試這個：

CSS：

.text{ 


    outline:1px solid orange; 

    width:100px; 
    height:20px; 
    overflow:hidden; 

} 

HTML：

<div class="text">This is shown. This is hidden</div> 

<div id="result"></div> 

<div id="container" style="visibility:hidden;"></div> 

JS：

$("<span />").text($(".text").text()).appendTo("#container"); 

$("#result").append("<span>"+$(".text").width()+"</span><br />"); 
$("#result").append("<span>"+$("#container span").width()+"</span><br />"); 

$("#result").append("<span>Overflow: "+ (($("#container span").width() > $(".text").width()) ? "yes" : "no")+"</span><br />"); 

Example

編輯

試試這個：

based on this plugin

New Example

CSS：

.text{ 
    outline:1px solid orange; 
    width:100px; 
    height:20px; 
    overflow:hidden; 
} 

HTML：

<br/> 
<br/> 
<div class="text" id="test1">This is shown. This is hidden</div> 
<div class="text" id="test2">No hidden</div> 
<br/> 
<br/> 
<div id="result"></div> 

JS：

(function($) { 

    $.fn.noOverflow = function(){ 

     return this.each(function() { 

      var el = $(this); 

      var originalText = el.text(); 
      var w = el.width(); 

      var t = $(this.cloneNode(true)).hide().css({ 
       'position': 'absolute', 
       'width': 'auto', 
       'overflow': 'visible', 
       'max-width': 'inherit' 
      }); 
      el.after(t); 

      var text = originalText; 
      while(text.length > 0 && t.width() > el.width()){ 
       text = text.substr(0, text.length - 1); 
       t.text(text + ""); 
      } 
      el.text(t.text()); 

      /* 
      var oldW = el.width(); 
      setInterval(function(){ 
       if(el.width() != oldW){ 
        oldW = el.width(); 
        el.html(originalText); 
        el.ellipsis(); 
       } 
      }, 200); 
      */ 

      this["overflow_text"] = { 
       hasOverflow: originalText != el.text() ? true : false, 
       texOverflow: originalText.substr(el.text().length) 
      }; 

      t.remove(); 

     }); 

    }; 

})(jQuery); 

$("#test1").noOverflow(); 

$("#result").append("<span>Test 1</span><br />"); 

$("#result").append("<span>Has Overflow: "+ (($("#test1")[0].overflow_text.hasOverflow) ? "yes" : "no")+"</span><br />"); 

$("#result").append("<span>Text Overflow: "+ $("#test1")[0].overflow_text.texOverflow+"</span><br />"); 

$("#test2").noOverflow(); 

$("#result").append("<br /><span>Test 2</span><br />"); 
$("#result").append("<span>Has Overflow: "+ (($("#test2")[0].overflow_text.hasOverflow) ? "yes" : "no")+"</span><br />"); 
$("#result").append("<span>Text Overflow: "+ $("#test2")[0].overflow_text.texOverflow+"</span><br />"); 

Answer 2

這可以給出在div中的文本可以換行的特定情況下的隱藏文本的估計值。

<div class="text"><div id="inner">This is shown. This is hidden</div></div> 

添加到的.text CSS類：

line-height: 20px; 

在運行時，您可以使用.height（）jQuery函數來獲取內部div的計算高度。將它除以行高，可以得到文本被包裝的行數，只顯示第一行。然後，您可以猜出顯示/未顯示的最後一個單詞，並在那裏對文本進行細分。

var text = $("#inner").html(); 
var height = $("#inner").height(); 
var lineheight = $("div.text").height(); 
var rows = Math.round(height/lineheight); 
alert("computed inner height: " 
    + $("#inner").height() 
    + " | rows: " + rows); 
alert("Hidden text: " 
    + text.substring(
     text.indexOf(" ",Math.round(text.length/rows)))); 

Answer 3

這裏是我的解決方案（使用jQuery）。

標記：

<div class="text">This is shown. This is hidden</div> 

CSS：

.text{ 


    outline:1px solid orange; 

    width:200px; 
    height:20px; 
    overflow:hidden; 

} 

（只有溢出：其實隱藏着重要的，代碼將仍然高度和寬度不同的價值觀工作）

JS：

$('.text').wrapInner('<div/>'); 
var originaltext = $('.text div').text(); 

var t = $('.text div').text(); 

while(true) 
{ 
    if ($('.text div').height() <= $('.text').height()) { break; } 

    $('.text div').text(t.substring(0, t.lastIndexOf(" "))); 
    t = $('.text div').text(); 
} 

$('.text div').text(originaltext); 

alert("shown: " + originaltext.substring(0, t.length)); 
alert("hidden: " + originaltext.substring(t.length)); 

下面是它在做什麼：

我們保存原始文本到一個變量，所以我們可以在以後恢復它。

然後我們一次刪除一個單詞，直到內部div降到與容器相同的高度（隱藏溢出）。仍然在div中的所有內容都是可見的，我們必須刪除的所有內容都是隱藏的。

限制

我的解決方案假定DIV只包含文本。它主要適用於像跨度這樣的內聯元素，但目前在這個過程中將它們去掉。它可以很容易地被固定來保存跨度，但是處理圖像或其他複雜問題（如定位元素）則涉及更多。

Answer 4

試試這個solution使用jQuery

JQuery的

$t = $('#text'); 

var shown, all, hiddenWidth; 

// we start with the shown width set (via css) at 100px 
shown = $t.width(); 

// we change the css to overflow:visible, float:left, and width:auto 
$t.css({'overflow': 'visible', 'float': 'left', 'width': 'auto'}); 

// and get the total width of the text 
all = $t.width(); 

// then we set the css back to the way it was 
$t.css({'overflow': 'hidden', 'float': '', 'width': '100px'}); 

// and retrieve the hiddenWidth 
hiddenWidth = all - shown; 

HTML

<div id="text">This is shown. This is hidden</div> 

CSS

#text{ 
    outline:1px solid orange; 
    width:100px; 
    height:20px; 
    overflow:hidden; 
}