🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Just another jQuery Typography plugin that prevents Orphans and allows to specify how many words allowed to display in the last line of a paragraph.

Typography

Documentation

#jQuery Unorphanize


gzip file sizenpm version

A jQuery helper for preventing orphans. Originally forked from simeydotme’s plugin, but with added functionality and significant refactoring.

##Basic Use

$(".selector").unorphanize();

Unorphanize will replace the last space with   without disturbing any inner HTML.

##Advanced Usage

$(".selector").unorphanize({   words: 3,   wrapEl: "span",   className: "u-nowrap" });

Unorphanize will wrap the last 3 words in a <span> with class u-nowrap without disturbing the inner HTML.

Using a wrapper element is typically better than &nbsp; because you can use CSS to prevent orphans only on wider screens. This prevents long words from extending beyond the parent container on mobile devices.

@media all and (min-width: 320px) {   .u-nowrap {     white-space: nowrap !important;   } }

##Tips Use sparingly, only on elements where orphans are particularly undesirable. Avoid applying to all paragraphs and headings, which could hurt performance.

##Why is this plugin necessary? If your element only contains plain text, you could do something simpler like this:

var $el = $('.selector'); var words = $el.text().split(' '); var lastWord = words.pop(); $el.html(words.join(' ') + '&nbsp;' + lastWord);

However, if the target element contains any HTML elements, they will be removed. Unorphanize preserves the inner HTML so you can safely use it on elements with children.


You May Also Like