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 XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  
<!--
​
  Created using http://jsbin.com
  Source can be edited via http://jsbin.com/epena/edit
​
-->
​
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
</style>
</head>
<body>
<p style="width:400px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed nulla tortor. Nam eros ipsum, rutrum vel blandit ac, posuere blandit dolor. Maecenas tincidunt tempor semper. Aenean vel justo et sem placerat volutpat. Phasellus vitae sem diam.asdasdasd</p>
​
<script type="text/javascript">
​
jQuery.fn.line = function(line) {
    
    var dummy = this.clone().css({
            top: -9999,
            left: -9999,
            position: 'absolute',
            width: this.width()
        }).appendTo(this.parent()),
        text = dummy.text().match(/\S+\s+/g);
​
    var words = text.length,
        lastTopOffset = 0,
        lineNumber = 0,
        ret = '',
        found = false;
        
    for (var i = 0; i < words; ++i) {
        
        dummy.html(
            text.slice(0,i).join('') + text[i].replace(/(\S)/, '$1<span/>') + text.slice(i+1).join('')
        );
        
        var topOffset = jQuery('span', dummy).offset().top;
        
        if (topOffset !== lastTopOffset) {
            lineNumber
            += 1;
        }
        
        lastTopOffset = topOffset;
        
        if (lineNumber === line) {
            
            found = true;
            ret += text[i];
            
        } else {
            
            if (found) {
                break;
            }
            
        }
        
    }
    
    dummy.remove();
    return ret;
    
};
​
​
setTimeout(function(){
$('body').append(  '*Third line*:  "' + $('p').line(4) + '"'  );
}, 1000);
​
​
</script>
​
​
​
</body>
</html>
Output 300px

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