', 24 | width: 200, 25 | keepHtml: true 26 | }); 27 | 28 | ### Result 29 | 30 |

31 |

This is an

32 |

example of

33 |

some long

34 |

text that we

35 |

want to split

36 |

into lines.

37 |

38 | 39 | Now go forth, and animate! 40 | 41 | For more demos, take a look at the `demos.html` file in this repo. There are 42 | some animated use cases in there as well. 43 | 44 | ## License 45 | 46 | Copyright (c) 2012 Jeremy Harris 47 | 48 | Permission is hereby granted, free of charge, to any person obtaining a copy of 49 | this software and associated documentation files (the "Software"), to deal in 50 | the Software without restriction, including without limitation the rights to 51 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 52 | the Software, and to permit persons to whom the Software is furnished to do so, 53 | subject to the following conditions: 54 | 55 | The above copyright notice and this permission notice shall be included in all 56 | copies or substantial portions of the Software. 57 | 58 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 59 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 60 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 61 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 62 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 63 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 64 | -------------------------------------------------------------------------------- /demos.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 87 | 148 | 149 | 150 |

151 |

152 |

jQuery splitLines() demos

153 |

154 | 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. 155 |

156 |

157 | splitLines() 158 |
159 |
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!
160 |
tag string The tag to wrap the lines in
161 |
keepHtml boolean Whether or not to try and preserve the html within the element. Default is true
162 |
163 |

164 |

165 |

Example of text split by lines

166 |

167 | This is an example of some long text that we want to split into lines. 168 |

169 |

170 | This is an example of some long text that we want to split into lines. 171 |

172 |

173 |

174 |

Example of text split by lines using span tags and a defined width

175 |

176 | This is an example of some long text that we want to split into lines. We also set it 177 | to use a span tag and defined the width instead of using the original's width. 178 |

179 |

180 | This is an example of some long text that we want to split into lines. We also set it 181 | to use a span tag and defined the width instead of using the original's width. 182 |

183 |

184 |

185 |

Example of text split by lines with a larger font

186 |

187 | This is an example of some long and large text that we want to split into lines. 188 |

189 |

190 | This is an example of some long and large text that we want to split into lines. 191 |

192 |

193 |

194 |

Example of text split with a line height

195 |

196 | My line height is smaller than my ascendors and descendors! 197 |

198 |

199 | My line height is smaller than my ascendors and descendors! 200 |

201 |

202 |

203 |

Example of text that contains html

204 |

205 | Notice how the strong and emphasized tags are maintained during split. 206 |

207 |

208 | Notice how the strong and emphasized tags are maintained during split. 209 |

210 |

211 |

212 |

Example of text split by lines, and cycling through each other

213 |

214 | Here's a spiffy fading example use case for splitLines(). 215 |

216 |

217 |

218 |

Another animation example

219 |

220 | And a sliding example using splitLines() to split into equal chunks! Isn't it neat? 221 |

222 |

223 |

224 |

A test for using a width that's entirely too small

225 |

226 | Long words will not fit into small widths! 227 |

228 |

229 | 230 |

231 |

A test for preserving <br> tags.

232 |

233 | Broken up
with html line
breaks but still with split lines. 234 | How about words in tags
with brs! 235 |

236 |

237 | 238 |

239 |

A test using the width of an outer container

240 |

241 |

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.

242 |

243 |

244 |

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.

245 |

246 |

247 | 248 |

249 |

A test using --line-index CSS variable to animate lines.

250 |

251 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 252 |

253 |

254 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 255 |

256 |

257 | 258 |

259 |

A test using --line-index CSS variable and extra tag wrappers to animate lines.

260 |

261 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 262 |

263 |

264 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 265 |

266 |

267 | 268 |

269 |

A test showing the plugin works with a selector that returns multiple nodes.

270 |

271 |

272 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 273 |

274 |

275 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 276 |

277 |

278 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 279 |

280 |

281 |

282 |

283 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 284 |

285 |

286 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 287 |

288 |

289 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est libero, eget convallis mauris viverra eu. 290 |

291 |

292 |

293 |

294 |

295 | 296 | 297 | -------------------------------------------------------------------------------- /jquery.splitlines.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Splits new lines of text into separate divs 3 | * 4 | * ### Options: 5 | * - `width` string The width of the box. By default, it tries to use the 6 | * element's width. If you don't define a width, there's no way to split it 7 | * by lines! 8 | * - `tag` string The tag to wrap the lines in 9 | * - `keepHtml` boolean Whether or not to try and preserve the html within 10 | * the element. Default is true 11 | * 12 | * @param options object The options object 13 | * @license MIT License (http://www.opensource.org/licenses/mit-license.php) 14 | */ 15 | (function($){ 16 | /** 17 | * Creates a temporary clone 18 | * 19 | * @param element element The element to clone 20 | */ 21 | function _createTemp(element) { 22 | return element.clone().css({position: 'absolute'}); 23 | }; 24 | 25 | /** 26 | * Splits contents into words, keeping their original Html tag. Note that this 27 | * tags *each* word with the tag it was found in, so when the wrapping begins 28 | * the tags stay intact. This may have an effect on your styles (say, if you have 29 | * margin, each word will inherit those styles). 30 | * 31 | * @param node contents The contents 32 | */ 33 | function _splitHtmlWords(contents) { 34 | var words = []; 35 | var splitContent; 36 | for (var c=0; c'); 39 | continue; 40 | } 41 | if (contents[c].nodeType == 3) { 42 | splitContent = _splitWords(contents[c].textContent || contents[c].toString()); 43 | } else { 44 | var tag = $(contents[c]).clone(); 45 | splitContent = _splitHtmlWords(tag.contents()); 46 | for (var t=0; t

').parent().html(); 49 | } 50 | } 51 | for (var w=0; w', 103 | wrap: '', 104 | keepHtml: true 105 | }; 106 | if (options) { 107 | $.extend(settings, options); 108 | } 109 | 110 | var arr = this; 111 | 112 | for (var index=0; index maxHeight) { 148 | prev = tempLine.html(); 149 | tempLine.html(html); 150 | newHtml.append(_markupContent(settings.tag, tempLine.html(), lineCount)); 151 | tempLine.html(''); 152 | w--; 153 | lineCount++; 154 | } 155 | } 156 | newHtml.append(_markupContent(settings.tag, tempLine.html(), lineCount)); 157 | 158 | tmpElement.html(newHtml.html()); 159 | } 160 | }; 161 | })(jQuery); 162 | --------------------------------------------------------------------------------