Ist es möglich zu erkennen, ob Text länger als eine Zeile in meinem div ist?

Question

Ich habe ein div mit etwas Text darin, der anfänglich nicht umschließt und eine Ellipse zeigt, aber ich möchte dem Benutzer die Möglichkeit geben, auf eine Leseoption zu klicken und dann das div zu erweitern, um den gesamten Text anzuzeigen.

Allerdings möchte ich in der Lage sein zu erkennen, ob der Text klein genug ist, um in das div zu passen, ohne es aus einer Zeile zu erweitern, und wenn ja, verstecken Sie die Show mehr Option.

Hier ist ein Link zu einem modifizierten JS Fiddle Ich habe Abarbeiten worden:

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

Und der Code von ihm:

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..."); 
     } 
    }); 
}); 

Ist es möglich, zu erkennen, ob der Text kurz genug ist, innerhalb des div zu passen und dann verstecken die weitere Option lesen?

Answer 1

Sie können DIV vergleichen width mit scrollWidth zu erkennen, ob Text überfüllt ist:

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

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

Answer 2

Es ist ein jQuery-Plugin, das Ihre Bedürfnisse erfüllen könnten: http://jedfoster.com/Readmore.js/

Answer 3

Dies ist wahrscheinlich unvollständig, aber Sie möchten möglicherweise etwas basierend auf der .height() -Methode tun, die jQuery Ihnen bereitstellt ())

$(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(); 
} 

});

Überprüfen Sie meine Lösung in Fiddler.

http://jsfiddle.net/gZe8b/