jQuery splitLines() demos
splitLines() takes a block of text and splits it up into separate lines based on the width of the box or a width passed to the function.
splitLines()
- width string The width of the box. By default, it tries to use the element's width. If you don't define a width, there's no way to split it by lines!
- tag string The tag to wrap the lines in
- keepHtml boolean Whether or not to try and preserve the html within the element. Default is true
Example of text split by lines
This is an example of some long text that we want to split into lines.
This is an example of some long text that we want to split into lines.
Example of text split by lines using span tags and a defined width
This is an example of some long text that we want to split into lines. We also set it
to use a span tag and defined the width instead of using the original's width.
This is an example of some long text that we want to split into lines. We also set it
to use a span tag and defined the width instead of using the original's width.
Example of text split by lines with a larger font
This is an example of some long and large text that we want to split into lines.
This is an example of some long and large text that we want to split into lines.
Example of text split with a line height
My line height is smaller than my ascendors and descendors!
My line height is smaller than my ascendors and descendors!
Example of text that contains html
Notice how the strong and emphasized tags are maintained during split.
Notice how the strong and emphasized tags are maintained during split.
Example of text split by lines, and cycling through each other
Here's a spiffy fading example use case for splitLines().
Another animation example
And a sliding example using splitLines() to split into equal chunks! Isn't it neat?
A test for using a width that's entirely too small
Long words will not fit into small widths!
A test for preserving <br> tags.
Broken up
with html line
breaks but still with split lines.
How about words in tags
with brs!
A test using the width of an outer container
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. Fusce erat urna, blandit sed ex sit amet, sollicitudin pellentesque ex.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. Fusce erat urna, blandit sed ex sit amet, sollicitudin pellentesque ex.
A test using --line-index CSS variable to animate lines.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu.
A test using --line-index CSS variable and extra tag wrappers to animate lines.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu.