SplitText

SplitText splits text within a container into individual lines, words, and letters.

Features:

• Supports resizing, HTML content, and special symbols like emojis.
• Handles multi-line breaks and non-breaking spaces.
• Saves initial nodes and listeners for easy restoration.
• Allows splitting into lines, words, or letters as needed.

note

Apply fontKerning: none to prevent layout shifts.

Example

Explore live examples in CodeSandbox:

With Letters

With HTML

With Lines Mask

Props

Static Props

Static properties are set during initialization and cannot be modified later.

Name	Description	Type	Default Value
container	The text container where the text will be split.	HTMLElement
letters	Specifies whether the text should be split into individual letters.	boolean	false
lines	Specifies whether the text should be split into lines.	boolean	false
linesWrapper	Specifies whether to wrap each line in an additional container.	boolean	false
letterTag	Specifies whether to wrap each line in an additional container.	string	'span'
wordTag	HTML tag to wrap each word.	string	'span'
lineTag	HTML tag to wrap each line.	string	'span'
resizeDebounce	The debounce delay for the resize event in milliseconds.	number	0

Accessors

note

All Module's accessors are available in this class.

letters

Type: HTMLElement[]

Retrieves an array of letter elements.

lettersMeta

Type: ISplitTextLetterMeta[]

Retrieves an array of letters metadata.

ISplitTextLetterMeta Structure

interface ISplitTextLetterMeta {
  element: HTMLElement;
}

lines

Type: HTMLElement[]

Retrieves an array of line elements.

linesMeta

Type: ISplitTextLineMeta[]

Retrieves an array of lines metadata.

ISplitTextLineMeta Structure

interface ISplitTextLineMeta {
  element: HTMLElement;
  words: ISplitTextWordMeta[];
  wrapper?: HTMLElement;
}

words

Type: HTMLElement[]

Retrieves an array of word elements.

wordsMeta

Type: ISplitTextWordMeta[]

Retrieves an array of words metadata.

ISplitTextWordMeta Structure

interface ISplitTextWordMeta {
  element: HTMLElement;
  letters: ISplitTextLetterMeta[];
}

Methods

note

All Module's methods are available in this class.

split

Splits the text into letters, words, and optionally lines based on configuration.

instance.split();

Callbacks

note

All Module's callbacks are available in this class.

beforeSplit

Called before the text is split

const destruct = instance.on('beforeSplit', () => console.log('beforeSplit'));

// Cancel the callback
destruct();

split

Called after the text has been split.

const destruct = instance.on('split', () => console.log('split'));

// Cancel the callback
destruct();