JSFiddle - React, Tailwind, and code Playground

by matmuchrapna

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="https://rawgithub.com/adobe-webplatform/balance-text/master/jquery.balancetext.js"></script>
<a href="http://blogs.adobe.com/webplatform/2013/01/30/balancing-text-for-better-readability/">Adobe post</a>,
<a href="http://adobe-webplatform.github.com/balance-text/demo/index.html">Adobe demo</a>,
<a href="https://github.com/adobe-webplatform/balance-text">Adobe polyfill github</a>
<hr>
<!-- 
TRY THIS:

“This is amazing. What it means is 85% of the people at JSConf care about bringing more women in their community not just in a casual, ‘Oh yeah, that would be nice,’ kind of way, but enough to put their money where their mouth is,” says Valerie Aurora, executive director of the Ada Initiative. “Just getting this data about the level of support is a huge contribution from the JSConf organizers.”

OR THIS

That’s one of a small number of welcoming messages in the new Flickr app for iPhone, greeting you as it guides you through the completely overhauled interface. There is much to love about the new iPhone app, but also a few things that are not so great. First, a look at the things I really like about the new application.
-->
    
    
<textarea>Первые упоминание об этом храме датируется II в. д.н.э и описывается в священной рукописи храмового пса Барилу, первого пса писавшего летописи отпечатками лап и когтей. До сих пор эти рукописи (лапоси) зарыты под землей и храняться под скульптурой того пса, пока мы их не откопали для вас и положи под стекло…</textarea>
    
    

<p class="text"></p>
<p class="text js-balanced"></p>

CSS

textarea, .text {
    width: 90%;
    margin: 10px auto;
    box-sizing: border-box;
    display: block;
    font: 1.4rem/1.6 serif;
}
.text {text-align: center;}

.text + .text { border-top: 1px solid red;}

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

JavaScript

function applyBalanceText() {
    $('.text').text(
        $('textarea').val()
    );
    $(".js-balanced").balanceText();
}

applyBalanceText();
$(window).resize(applyBalanceText);

$('textarea').on('change keyup keydown blur', function() {
    applyBalanceText();
});