Tiny Text Splitting JavaScript Library – SplitBun

Preview:

Description:

SplitBun is a lightweight yet robust text split JavaScript library that enables effortless breaking down of text elements into lines, words, or characters.

The library handles the heavy lifting of slicing up your text while giving control over options like specifying the type of split and passing a callback when the split completes. The wrapperClass and innerClass options let you easily style the generated elements or create engaging CSS-powered text animations.

How to use it:

1. Install and import the SplitBun.

# NPM
$ npm i splitbun

import splitBun from 'splitbun'

2. Initialize the SplitBun on your text container and specify the split type: lines, words, or chars.

<div id="demo">
... text here ...
</div>

splitBun('#demo',{
  type: 'lines'
})

3. Set the CSS classes of wrapper & innner elements.

splitBun('#demo',{
  type: 'lines',
  wrapperClass: 'wrapper-ele',
  innerClass: 'inner-ele',
})

4. Execute a function after text splitting.

splitBun('#demo',{
  type: 'lines',
  onComplete: () => {
    console.log('split text completed)
  },
})

Changelog:

v1.0.15 (03/10/2025)

• remove console log

v1.0.13 (11/10/2023)

• Support custom inline style