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>
<html>
<head>
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="http://webplatform.adobe.com/balance-text/demo/jquery.balancetext-1.2.0.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
 
  <h1 class="balance-text balance-this-text"> 1. This element should have responsive balanced text. When you re-size the window, the lines should all be a similar length, with the last line no more than a little shorter than the others </h1>
​
  <h1 > 2. This element shouldn't have balanced text. When you re-size the window, the lines shouldn't be a similar length, with the last line more than a little shorter than the others </h1>
  
    
    <h1 class="balance-this-text"> 3. This element should balance text on page load only. When you re-size the window, the lines will go really strange. </h1>
  
  <h1 class="balance-text"> 4. This element has balanced text, but at the cost of inline elements like <a href="/">links</a> and <i>italics</i> being removed. </h1>
​
<h1 class="balance-text"> 5. This element should have responsive balanced text. However, at time of writing, it only starts to balance after the window is resized. </h1>
  
</body>
</html>
 
​
 
$(document).ready( 
  function(){
    $('.balance-this-text').balanceText();   
  }
);
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers