JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/balance-text/3.3.1/balancetext.min.js"></script>
<div class="">
  모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다. 통신·방송의 시설기준과 신문의 기능을 보장하기 위하여 필요한 사항은 법률로 정한다.
</div>

<div class="my-class">
  모든 국민은 근로의 의무를 진다. 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다. 통신·방송의 시설기준과 신문의 기능을 보장하기 위하여 필요한 사항은 법률로 정한다.
</div>

<div class="center">
 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.
</div>
<div class="center my-class">
 국가는 근로의 의무의 내용과 조건을 민주주의원칙에 따라 법률로 정한다.
</div>

CSS

body {
  word-break: keep-all;
  
}
div {
  margin: 40px 0;
}
.center {
  text-align: center;
  
}

JavaScript

// Put the balanceText utility into "polyfill" mode
    // This was the default mode of the 2.0.0 jQuery plugin when it loaded
    $.ready(function() {
        balanceText(); 
    });

    // manually trigger on a list of elements
    balanceText($('.my-class')); // equivalent to $('.my-class').balanceText();

    // manually trigger on a list of elements and update on browser resize
    balanceText($('.my-class'), {watch: true}); // equivalent to $.balanceText('.my-class');

    // manually re-balance all triggered elements
    balanceText.updateWatched(); // equivalent to $.fn.balanceTextUpdate();