jQuery Plugin To Balance The Remaining (Empty) Space In Text - BalanceText

jQuery Plugin To Balance The Remaining (Empty) Space In Text - BalanceText
File Size: 131 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

BalanceText is a lightweight (~4kb minified) jQuery plugin used to balance the remaining (empty) space in each line box of your text for better readability. Similar to the 'text-wrap: balance' property introduced in the CSS Text Module Level 4.

Installing via Package Managerss:

bower install balance-text --save
npm install balance-text --save

How to use it:

1. Import the jquery.balancetext.min.js script into the html page which has jQuery library loaded.

<script src="jquery.min.js"></script>
<script src="jquery.balancetext.min.js"></script>

2. Or import it directly via a CDN.

<script src="jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/balance-text/2.0.0/jquery.balancetext.min.js"></script>

3. Add the CSS class 'balance-text' to the text wrapper element.

<p class="balance-text">
  Lorem ipsum dolor sit amet.
</p>

4. Apply the 'text-wrap: balance' property to the text.

.balance-text {
  text-wrap: balanced; 
}

This awesome jQuery plugin is developed by adobe-webplatform. For more Advanced Usages, please check the demo page or visit the official website.