Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!-- DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" -->
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style type="text/css">
    #container {
    }
    #wrappingText {
      display: inline;
    }
    #highlighter {
      background-color:yellow;
      position:absolute;
      width:100%;
      z-index: -1;
    }
</style>
</head>
  <body>Show <select></select> lines
    <div id="container" style="overflow:hidden">
    <div id="wrappingText">This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.This is an example of a div that has wrapping text lines. Choose how many lines you would like to be visible by changing the select box above this paragraph.  Thanks.</div>
</div>
<div id="debug"></div>
</body>
</html>
 
var $sel  = $("select"),
​
lines = $("#wrappingText")[0].getClientRects();
console.log(lines[0]);
​
// The TextRectangle is static, so we need to reset it when the window resizes
$(window).resize(function() {
    $sel.html("");
    lines = $("#wrappingText")[0].getClientRects();
​
    // Add the number of lines to the select element
    for (var i=0; i<lines.length; i++)
        $sel.append("<option>"+(i+1)+"</option>");
​
    // Select the last element as the default
    $sel.children(":last-child").attr("selected", true);
​
    $sel.change();
}).resize();
​
$sel.change(function () {
  var divHeight = 0;
  
  // Loop through the lines we need and work out the height
  for (var i=0, max = this.selectedIndex; i <= max; i++)
        divHeight += lines[i].bottom - lines[i].top;
  
  // Apply the offset for each line
  divHeight += i;
  
  // Animate the div height
  $("#container").animate({height:divHeight});  
}).change();
​
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers