一个用于实现在网页中包装文本平衡的插件
A utility to provide an alternate text wrapping algorithm. I hope to get this into the CSS spec, so it's implemented as an optional "polyfill". It already appears in the CSS Text Module Level 4 Editor's Draft.
The default text rendering algorithm is:
That algorithm guarantees that the text is rendered using the least number of lines, but when text is centered and wraps to more than 1 line, it can produce visually undesirable results such as a long line of centered text followed by a short line of centered text. What I want is for the text to be balanced across lines. By "balanced across lines", I mean that the text is rendered so that the amount of text on each line is about the same. This plugin implements a line-breaking algorithm to do that automatically.
Here is a simple Balance Text setup:
<style type="text/css">
/* Plugin looks for elements with class named "balance-text" */
.balance-text {
text-wrap: balance; /* Apply (proposed) CSS style */
}
</style>
<script src="balancetext.min.js"></script>
<script>
balanceText();
</script>
See the demo provided or this online version for a working sample.
If you call balanceText(), Balance Text will automatically run on any elements with balance-text class:
You may also manually trigger it, e.g. if you're dynamically adding text to the DOM:
balanceText(el); // Balance a single element
balanceText([el, el]); // Balance a list of elements
balanceText('.el'); // Balance a list of elements based on query selector
This will apply the balance-text formatting once. If you'd like to re-apply automatically during window resize, you can use pass an options parameter instead:
balanceText(el, {watch: true});
If you need to manually re-balance all triggered elements, use:
balanceText.updateWatched();
This library used to be implemented as a jQuery plugin (as of v2.0.0) but was re-written as a native utility (as of 3.0.0). If you'd like to continue using the jQuery interface, you can continue using 2.0.0 (link below).
You can also migrate to balanceText() from jQuery using this guide (shown compared to the 2.0.0 interface):
…
//cdnjs.cloudflare.com/ajax/libs/balance-text/3.3.1/balancetext.min.js
//cdn.jsdelivr.net/npm/[email protected]/balancetext.min.js
Support for Internet Explorer was dropped in v3.3.0, so use v3.2.1 for IE support.
//cdnjs.cloudflare.com/ajax/libs/balance-text/3.2.1/balancetext.min.js
//cdn.jsdelivr.net/npm/[email protected]/balancetext.min.js
Has a hard requirement on jQuery.
//cdnjs.cloudflare.com/ajax/libs/balance-text/2.0.0/jquery.balancetext.min.js
//cdn.jsdelivr.net/jquery.balancetext/2.0.0/jquery.balancetext.min.js
BalanceText does not have any dependencies. BalanceText is designed to run in most modern browsers.
Make sure the code passes ESLint
npm run lint
We minify using Uglify-JS
npm run build
Pull Request:
Create new github Release
Update npm
npm publish (may need to npm adduser)Update vanity page: gh-pages branch
Contributions are welcomed! Read the Contributing Guide for more information.
暂无开放 Issues，或尚未同步最近议题。