simpleWordWrapper by Alexander Sharkov back to source
Example #1 (default call)
javascript code
<![CDATA[
<script>
$(document).ready(function () {
$('.example1').simpleWordWrapper()
});
</script>
]]>
HTML code
<![CDATA[
<p class="example1">test test2 test3 test4 test5 test6</p>
]]>
HTML Result, after the script have worked
<![CDATA[
<p class="example1">
<span class="simpleWordWrapper simpleWordWrapper-1">test test2 test3 </span>
<span class="simpleWordWrapper simpleWordWrapper-2">test4 test5 test6</span>
</p>
]]>
Example with script and without it.
For clarity I displayed .simpleWordWrapper like blocks
Without script
test test2 test3 test4 test5 test6
With script
test test2 test3 test4 test5 test6
Example #2 (eachWord mode)
javascript code
<![CDATA[
<script>
$(document).ready(function () {
$('.example2').simpleWordWrapper({
eachWord: true
})
});
</script>
]]>
HTML code
<![CDATA[
<p class="example2">test test2 test3 test4 test5 test6</p>
]]>
HTML Result, after the script have worked
<![CDATA[
<p class="example2">
<span class="simpleWordWrapper simpleWordWrapper-1">test </span>
<span class="simpleWordWrapper simpleWordWrapper-2">test2 </span>
<span class="simpleWordWrapper simpleWordWrapper-3">test3 </span>
<span class="simpleWordWrapper simpleWordWrapper-4">test4 </span>
<span class="simpleWordWrapper simpleWordWrapper-5">test5 </span>
<span class="simpleWordWrapper simpleWordWrapper-6">test6</span>
</p>
]]>
Example with script and without it.
For clarity I displayed .simpleWordWrapper like blocks
test test2 test3 test4 test5 test6
test test2 test3 test4 test5 test6
Example #3 (eachWord mode + dot'n return separator)
javascript code
<![CDATA[
<script>
$(document).ready(function () {
$('.example3').simpleWordWrapper({
eachWord: true,
returnSeparator: false
})
});
</script>
]]>
HTML code
<![CDATA[
<p class="example3">test test2 test3 test4 test5 test6</p>
]]>
HTML Result, after the script have worked
<![CDATA[
<p class="example3">
<span class="simpleWordWrapper simpleWordWrapper-1">test</span>
<span class="simpleWordWrapper simpleWordWrapper-2">test2</span>
<span class="simpleWordWrapper simpleWordWrapper-3">test3</span>
<span class="simpleWordWrapper simpleWordWrapper-4">test4</span>
<span class="simpleWordWrapper simpleWordWrapper-5">test5</span>
<span class="simpleWordWrapper simpleWordWrapper-6">test6</span>
</p>
]]>
Example with script and without it.
For clarity I displayed .simpleWordWrapper like blocks
test test2 test3 test4 test5 test6
test test2 test3 test4 test5 test6
Example #4 (eachWord mode & change result separator)
javascript code
<![CDATA[
<script>
$(document).ready(function () {
$('.example3').simpleWordWrapper({
eachWord: true,
returnSeparator: ' - '
})
});
</script>
]]>
HTML code
<![CDATA[
<p class="example4">test test2 test3 test4 test5 test6</p>
]]>
HTML Result, after the script have worked
<![CDATA[
<p class="example4">
<span class="simpleWordWrapper simpleWordWrapper-1">test - </span>
<span class="simpleWordWrapper simpleWordWrapper-2">test2 - </span>
<span class="simpleWordWrapper simpleWordWrapper-3">test3 - </span>
<span class="simpleWordWrapper simpleWordWrapper-4">test4 - </span>
<span class="simpleWordWrapper simpleWordWrapper-5">test5 - </span>
<span class="simpleWordWrapper simpleWordWrapper-6">test6</span>
</p>
]]>
Example with script and without it.
For clarity I displayed .simpleWordWrapper like inline
test test2 test3 test4 test5 test6
test test2 test3 test4 test5 test6
Example #5 (eachWord mode + change result separator & add separator to last result item)
javascript code
<![CDATA[
<script>
$(document).ready(function () {
$('.example5').simpleWordWrapper({
eachWord: true,
returnSeparator: ': ',
lastSeparator: true
})
});
</script>
]]>
HTML code
<![CDATA[
<p class="example5">test test2 test3 test4 test5 test6</p>
]]>
HTML Result, after the script have worked
<![CDATA[
<p class="example5">
<span class="simpleWordWrapper simpleWordWrapper-1">test: </span>
<span class="simpleWordWrapper simpleWordWrapper-2">test2: </span>
<span class="simpleWordWrapper simpleWordWrapper-3">test3: </span>
<span class="simpleWordWrapper simpleWordWrapper-4">test4: </span>
<span class="simpleWordWrapper simpleWordWrapper-5">test5: </span>
<span class="simpleWordWrapper simpleWordWrapper-6">test6: </span>
</p>
]]>
Example with script and without it.
For clarity I displayed .simpleWordWrapper like blocks
test test2 test3 test4 test5 test6
test test2 test3 test4 test5 test6