Inline HTML

StringSplit does not require plain text. You can use inline HTML inside split elements and the module will preserve your markup in the rebuilt DOM.

How Inline Elements Are Handled

The module classifies every HTML element inside the source into one of three categories:

Inline wrappers — preserved with their children split

Elements like <em>, <strong>, <a>, <span>, <b>, <i>, <u>, <mark>, <code>, <small>, <del>, <ins>, <sub>, <sup>, and any other element that is not in the opaque list (see below) and has children.

These elements are reconstructed in the output DOM with their original tag and all attributes. Their children are split normally into words and characters.

<!-- source -->
<p string="split" string-split="word">
  Text in <em>emphasis</em> and <strong class="bold">bold</strong>.
</p>

<!-- output (simplified) -->
<p class="-splitted">
  <span class="-s-word">Text</span>&nbsp;
  <span class="-s-word">in</span>&nbsp;
  <em>
    <span class="-s-word">emphasis</span>&nbsp;
  </em>
  <span class="-s-word">and</span>&nbsp;
  <strong class="bold">
    <span class="-s-word">bold.</span>
  </strong>
</p>

Your CSS selectors like em, strong.bold, or a[href] continue to work because the element is recreated with the same tag and attributes.

Nesting is fully supported:

<a href="/link"><strong>click here</strong></a>

Both <a> and <strong> are preserved in the output, wrapping the split word/char spans.

Opaque elements — preserved as-is, not split

These elements are inserted into the output untouched. Their content is not split into words or characters.

The full list:

img, video, audio, canvas, iframe, object, svg,
input, textarea, select, button,
area, base, col, embed, hr, link, meta, param,
source, track, wbr, picture, table

<!-- source -->
<p string="split" string-split="word">
  Check <img src="icon.png" alt="icon" /> this.
</p>

<!-- output (simplified) -->
<p class="-splitted">
  <span class="-s-word">Check</span>&nbsp;
  <img src="icon.png" alt="icon" />
  <span class="-s-word">this.</span>
</p>

Opaque elements:

• keep all their attributes and content
• do not receive .-s-word or .-s-char wrappers
• do not receive CSS index variables
• occupy a slot in the index sequence — the next word after an <img> has an incremented --word-index

<br> — line break

<br> forces a line break in the layout. Text before and after <br> ends up on separate lines.

<h1 string="split" string-split="line[start]|char-line[start]">
  Line One<br />Line Two
</h1>

Each line gets its own .-s-line wrapper with separate --line-index values.

<split-class>

<split-class> is a special authoring helper for applying CSS classes to generated wrappers. It does not appear in the output DOM.

<h2 string="split" string-split="word[start]|char-word[start]">
  <split-class class="is-accent">Signal</split-class> Layer
</h2>

The word "Signal" and its char wrappers receive the class is-accent. The word "Layer" does not.

How classes are applied

• If every char in a word has the same split-class, the classes are hoisted to the .-s-word wrapper
• Otherwise, the classes appear on individual .-s-char wrappers

Nesting

<split-class> can be nested. Inner classes accumulate:

<split-class class="highlight">
  <split-class class="accent">Bold</split-class> text
</split-class>

• "Bold" gets classes highlight and accent
• "text" gets class highlight only

-before-element And -after-element

When text sits adjacent to an opaque element, the module adds helper classes to the nearby wrappers:

• -before-element — on the wrapper immediately before an opaque element
• -after-element — on the wrapper immediately after an opaque element

These classes appear on whichever wrapper level is active (.-s-line, .-s-word, or .-s-char). Use them to adjust spacing or animation timing:

.-s-word.-before-element {
  margin-right: 0.5em;
}

Word Joining

When text from different inline elements runs together without whitespace, the module handles it intelligently:

<p string="split" string-split="word">
  <em>emph</em>asis
</p>

Since there is no space between </em> and "asis", the module keeps them visually together — no extra space is inserted between them. They remain separate wrappers because they have different styling contexts (<em> vs plain text), but they render as one visual word.

Edge Cases

Empty inline elements

An element like <span></span> or <em></em> (with no children) is treated as an opaque element — it is kept as-is and not split. If you need an element to wrap split content, make sure it has text or child elements inside.

Custom elements and Shadow DOM

Custom elements follow the same rules as standard elements. If a custom element is not in the opaque list and has children, its children are split. Shadow DOM content is not reached.

Attributes are preserved

All attributes on inline elements are preserved exactly: class, href, style, data-*, id, etc. The reconstructed element in the output is functionally identical to the original for CSS and JS purposes.

Related

• Base module page: StringSplit
• DOM output details: DOM Output
• Grammar: Split Grammar
• Fit behavior: Fit And Rebuild