Sepa qué desbordamiento: oculto ha ocultado

Question

Quiero saber si hay alguna forma de que pueda llamar y usar lo que el overflow:hidden tiene bien escondido.

Para aclarar lo que quiero decir, en this example me gustaría saber que "Esto está oculto" es la parte oculta de la div.

¿Esto es posible? ¿Cómo lo abordarías?

He etiquetado la pregunta jQuery pero, por supuesto, todo lo que hace el trabajo es genial, CSS puro o Javascript funcionará bien.

¡Gracias de antemano!

Answer 1

Prueba esto:

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

EDITAR

Prueba esto:

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

Esto puede dar una estimación del texto oculto en el caso particular en que el texto en el div puede envolverse.

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

añadir a la clase css .text:

line-height: 20px; 

En tiempo de ejecución, puede utilizar la función de jQuery .height() para obtener la altura calculada de la div interior. Al dividirlo por la altura de la línea, puede obtener el número de líneas a las que se ha envuelto el texto, y solo se muestra la primera. Luego puede adivinar la última palabra que se muestra/no se muestra y subscribir su texto allí.

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

Aquí está mi solución (usando jQuery).

de marcado:

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

CSS:

.text{ 


    outline:1px solid orange; 

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

} 

(Sólo el desbordamiento:. Escondida en realidad importa, el código seguirá funcionando con diferentes valores de altura y anchura)

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

Esto es lo que está haciendo:

guardamos el texto original en una variable para que podamos restaurar más tarde.

Luego, eliminamos una palabra a la vez, hasta que el div interno haya disminuido a la misma altura que el contenedor (con el desbordamiento oculto). Todo lo que todavía estaba en el div era visible y todo lo que teníamos que quitar estaba oculto.

Limitaciones

Mi solución asume el div contiene sólo texto. Principalmente funcionará con elementos en línea como tramos, pero actualmente los elimina durante el proceso. Se puede arreglar fácilmente para preservar los tramos, pero lidiar con imágenes u otras complicaciones, como los elementos posicionados, es mucho más complicado.

Answer 4

Prueba este solution usando 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; 
}