Skip to main content

Props

note

All SplitText props are static and cannot be changed in runtime.

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.
const text = new SplitText({
  container: document.getElementById('split-text')
});

letters​

  • Type: boolean
  • Default: false
  • Whether to split the text into individual letters.
  • See demo
const text = new SplitText({
  letters: true
});

lines​

  • Type: boolean
  • Default: false
  • Whether to split the text into lines.
  • See demo
const text = new SplitText({
  lines: true
});

linesWrapper​

  • Type: boolean
  • Default: false
  • Whether to wrap each line in an additional container.
  • See demo
const text = new SplitText({
  linesWrapper: true
});

letterTag​

  • Type: string
  • Default: 'span'
  • The HTML tag to wrap each letter.
const text = new SplitText({
  letterTag: 'span'
});

wordTag​

  • Type: string
  • Default: 'span'
  • The HTML tag to wrap each word.
const text = new SplitText({
  wordTag: 'span'
});

lineTag​

  • Type: string
  • Default: 'span'
  • The HTML tag to wrap each line.
const text = new SplitText({
  lineTag: 'span'
});

letterClass​

  • Type: string
  • Default: 'v-split-text__letter'
  • CSS class name applied to each letter.
const text = new SplitText({
  letterClass: 'letter'
});

wordClass​

  • Type: string
  • Default: 'v-split-text__word'
  • CSS class name applied to each word.
const text = new SplitText({
  wordClass: 'word'
});

lineClass​

  • Type: string
  • Default: 'v-split-text__line'
  • CSS class name applied to each line.
const text = new SplitText({
  lineClass: 'line'
});

lineWrapperClass​

  • Type: string
  • Default: 'v-split-text__line-wrapper'
  • CSS class name applied to the line wrapper.
const text = new SplitText({
  lineWrapperClass: 'line-wrapper'
});

resizeDebounce​

  • Type: number
  • Default: 0
  • Debounce delay in milliseconds for the resize event.
const text = new SplitText({
  resizeDebounce: 0
});

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.
  • See demo
const text = new SplitText({
  ignore: '.ignore-me'
});

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.
  • See demo
const segmenter = new Intl.Segmenter('zh', { granularity: 'word' });

const text = 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.
  • See demo
const text = new SplitText({
  wordDelimiter: ' '
});

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.
  • See demo
const text = new SplitText({
  wordDelimiterOutput: '—'
});