Skip to main content

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 for easy restoration.
  • Allows splitting into lines, words, or letters as needed.
  • Much faster than GSAP or SplitType.
note

Apply fontKerning: none to prevent layout shifts.

Demo​

Explore a basic demo on CodePen:

More demos​

To explore more demos, click here.

Performance​

SplitText is a fast alternative to GSAP SplitText or split-type.

See perfomance comparison of:

Props​

Static Props​

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

container​

  • Type: HTMLElement
  • The text container where the text will be split.

letters​

  • Type: boolean
  • Default: false
  • Whether to split the text into individual letters.

lines​

  • Type: boolean
  • Default: false
  • Whether to split the text into lines.

linesWrapper​

  • Type: boolean
  • Default: false
  • Whether to wrap each line in an additional container.

letterTag​

  • Type: string
  • Default: 'span'
  • The HTML tag to wrap each letter.

wordTag​

  • Type: string
  • Default: 'span'
  • The HTML tag to wrap each word.

lineTag​

  • Type: string
  • Default: 'span'
  • The HTML tag to wrap each line.

letterClass​

  • Type: string
  • Default: 'v-split-text__letter'
  • CSS class name applied to each letter.

wordClass​

  • Type: string
  • Default: 'v-split-text__word'
  • CSS class name applied to each word.

lineClass​

  • Type: string
  • Default: 'v-split-text__line'
  • CSS class name applied to each line.

lineWrapperClass​

  • Type: string
  • Default: 'v-split-text__line-wrapper'
  • CSS class name applied to the line wrapper.

resizeDebounce​

  • Type: number
  • Default: 0
  • Debounce delay in milliseconds for the resize event.

ignore​

  • Type: string | HTMLElement[] | ((element: HTMLElement) => boolean) | null
  • Default: null
  • Elements or selectors to exclude from splitting. Can be a CSS selector string, an array of HTMLElements, or a function that returns a boolean.

prepareText​

  • Type: (text: string) => string
  • Default: (text) => text
  • Optional callback to preprocess text before it is split into words. This function receives the original text and should return the modified text. It is useful for languages like Chinese where standard word splitting may not work correctly.
const segmenter = new Intl.Segmenter('zh', { granularity: 'word' });

const instance = new SplitText({
  container,
  prepareText: (source) => [...segmenter.segment(source)].map((s) => s.segment).join(' '),
});

wordDelimiter​

  • Type: string
  • Default: (whitespace)
  • Specifies a custom delimiter used to split text into words. By default, splitting occurs on regular whitespace.

wordDelimiterOutput​

  • Type: string | null
  • Default: null
  • Provides an alternative delimiter to use when outputting the split words. Useful when a custom input delimiter is used but the output should differ.

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();