Savoir ce que débordement: caché a caché

Question

Je veux savoir si vous pouvez appeler et utiliser ce que le overflow:hidden a bien caché.

Pour clarifier ce que je veux dire, dans this example je voudrais savoir que "Ceci est caché" est la partie cachée de la div.

Est-ce encore possible? Comment l'aborderiez-vous? J'ai jeté un tag à la question jQuery mais bien sûr tout ce qui fait le travail est super, le CSS pur ou le Javascript suffiront.

Merci d'avance!

Answer 1

Essayez ceci:

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

EDIT

Essayez ceci:

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

Cela peut donner une estimation du texte caché dans le cas particulier dans lequel le texte dans la div peut envelopper.

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

ajouter à la classe .text css:

line-height: 20px; 

Lors de l'exécution, vous pouvez utiliser la fonction jquery .height() pour obtenir la hauteur calculée de la div intérieure. En le divisant par la hauteur de ligne, vous pouvez obtenir le nombre de lignes sur lesquelles le texte a été enveloppé, seul le premier étant affiché. Ensuite, vous pouvez deviner le dernier mot affiché/non affiché et la sous-chaîne de votre texte.

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

Voici ma solution (en utilisant jQuery).

Markup:

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

CSS:

.text{ 


    outline:1px solid orange; 

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

} 

(Seul le débordement. Caché importe réellement, le code fonctionne toujours avec des valeurs différentes pour la hauteur et la largeur)

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

Voici ce qu'il fait:

Nous sauvegardons le texte original dans une variable afin que nous puissions restaurer plus tard. Nous supprimons ensuite un mot à la fois, jusqu'à ce que la div interne ait diminué à la même hauteur que le conteneur (avec débordement caché). Tout ce qui était encore dans la div était visible et tout ce que nous devions enlever était caché.

Limites

Ma solution suppose que la div ne contient que du texte. Il fonctionnera principalement avec des éléments en ligne comme des travées, mais les enlève actuellement pendant le processus. Il pourrait facilement être réparé pour préserver les portées, mais il est beaucoup plus difficile de faire face à des images ou à d'autres complications comme des éléments positionnés.

Answer 4

Essayez cette solution en utilisant 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; 
}