È possibile rilevare se il testo è più lungo di una riga nel mio div?

Question

Ho un div con del testo che inizialmente non si avvolge e mostra un'ellissi ma voglio dare all'utente la possibilità di fare clic su un'opzione di lettura più e quindi espandere il div per mostrare l'intero testo.

Tuttavia, voglio essere in grado di rilevare se il testo è abbastanza piccolo da stare nel div senza doverlo espandere da una riga e in tal caso nascondere l'opzione show più.

Ecco un link ad un JS Fiddle modificato Ho lavorato fuori:

http://jsfiddle.net/M2APS/44/

E il codice da esso:

HTML:

<div data-role="page" id="p1"> 
<div data-role="content">  
<ul data-role="listview" data-inset="true"> 
    <li data-role="list-divider">Item Title</li> 
    <li> 
     <div class="less"> 
      Need to detect if this text is long enough to show the "Read More" if it is not don't 
     </div> 
     <div class="text-size">Read more...</div> 
    </li> 
</ul>  

CSS:

.less{ 
word-wrap: break-word; 
white-space: nowrap; 
text-overflow: ellipsis; 
overflow: hidden; 
} 

.more{ 
white-space: normal; 
} 

.text-size{ 
display: block; 
text-align: right; 
padding-top: 10px; 
color: blue !important; 
cursor: pointer; 
} 

JS:

$(document).bind('pageshow', function() { 
    $(".text-size").click(function(){ 
     $(".ui-li > div").toggleClass("less"); 
     if($(".text-size").html() == "Read more...") 
     { 
      $(".text-size").html("Read less..."); 
     } 
     else 
     { 
      $(".text-size").html("Read more..."); 
     } 
    }); 
}); 

è possibile rilevare se il testo è abbastanza breve per adattarsi all'interno del div e poi nascondere il read more opzione?

Answer 1

È possibile confrontare i DIV width con scrollWidth per rilevare se il testo è straripante:

if ($('.less')[0].scrollWidth <= $('.less').width()) { 
    $(".text-size").hide(); 
} 

Demo: http://jsfiddle.net/ygalanter/M2APS/50/

Answer 2

V'è un plugin jQuery che può soddisfare le vostre esigenze: http://jedfoster.com/Readmore.js/

Answer 3

Questo è probabilmente incompleto, ma potresti voler fare qualcosa in base al metodo .height() fornito da jQuery (http://api.jquery.com/height/)

$(document).bind('pageshow', function() { 
if($(".ui-li > div").height() > 20) { 
    $(".ui-li > div").addClass("less"); 
    $(".text-size").click(function(){ 
     $(".ui-li > div").toggleClass("less"); 
     if($(".text-size").html() == "Read more...") 
     { 
      $(".text-size").html("Read less..."); 
     } 
     else 
     { 
      $(".text-size").html("Read more..."); 
     } 
    }); 
} else { 
    // one liner 
    $(".text-size").hide(); 
} 

});

Controlla la mia soluzione in violinista.

http://jsfiddle.net/gZe8b/