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.
note

Apply fontKerning: none to prevent layout shifts.

Example​

Explore live examples in CodePen:

With Letters​

With HTML​

With Lines Mask​

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.

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