Author: | shshaw |
---|---|
Views Total: | 2,853 views |
Official Page: | Go to website |
Last Update: | July 3, 2018 |
License: | MIT |
Preview:

Description:
Splitting.js is a tiny JavaScript library which can be used to split the text into words and characters wrapped in the span
element. So that you’re able to apply custom CSS styles to the words and characters individually.
How to use it:
Install the package with NPM.
# NPM $ npm install splitting --save
Or directly include the Splitting.js from a CDN.
<script src="//unpkg.com/splitting/splitting.js"></script>
Split the text content into words.
<p data-splitting-words>Hello World!</p>
Splitting.words("[data-splitting-words]");
<!-- Output --> <p class="splitting" data-splitting-chars style="--total-words:1;"> <span class="word" data-word="Hello" style="--word-index:0;">Hello</i> <span class="word" data-word="World!" style="--word-index:1;">World!</i> </p>
Split the text content into characters.
<p data-splitting-chars>HELLO</p>
Splitting.chars("[data-splitting-chars]");
<!-- Output --> <p class="splitting" data-splitting-chars style="--total-words:1; --total-chars:5;"> <span class="word" data-word="HELLO" style="--word-index:0;"> <span class="char" data-char="H" style="--char-index:0;">H</i> <span class="char" data-char="E" style="--char-index:1;">E</i> <span class="char" data-char="L" style="--char-index:2;">L</i> <span class="char" data-char="L" style="--char-index:3;">L</i> <span class="char" data-char="O" style="--char-index:4;">O</i> </i> </p>
Split an element by words.
Splitting.lines("p[data-splitting]");
Split a string into words or characters.
Splitting.fromString("string here", { // or 'words' type: "chars", // true to receive an Element back instead of a String. element: false });