Dynamically prevent text orphans by enforcing a minimum number of words in the last line of any text block.
Include jQuery and the jquery.preventTextOrphans.min.js plugin in your HTML:
<head>
<script src="lib/jquery.min.js"></script>
<script src="lib/jquery.preventTextOrphans.min.js"></script>
</head>Ensure that your stylesheet contains a CSS class that disables text wrapping. The plugin uses .text-nowrap by default to match Bootstrap's nomenclature, but this can be customized to match your project:
.text-nowrap {
white-space: nowrap;
}Then call preventTextOrphans() on the elements where you wish to apply it:
$("h1, h2, h3, h4, h5, h6, .enable-pto").preventTextOrphans();The following options are available:
$("h1, h2, h3, h4, h5, h6, .enable-pto").preventTextOrphans({
minimum: 2,
wrapperClass: "text-nowrap"
});minimum: The minimum number of words that must appear in the last line of the text block. Defaults to2wrapperClass: The class name to use on the HTML element that wraps theminimumnumber of words. Defaults totext-nowrap
When resizing the viewport, the plugin now automatically adjusts where the <span class="text-nowrap"> element is inserted to account for text reflow.
If the selected elements include HTML tags, those tags will be preserved when the plugin is applied. For example:
<h2>Let Us Know <strong>What You Think</strong></h2>Will become:
<h2>Let Us Know <strong>What <span class="text-nowrap">You Think</span></strong></h2>If the selected elements include HTML entities, those entities are properly treated as single words. For example:
<h2>Contact Us & Information</h2>Will become:
<h2>Contact Us <span class="text-nowrap">& Information</span></h2>Use the .disable-pto class to selectively disable the plugin on specific elements that it would otherwise apply to. For example, if the plugin is initialized like this:
$("h1, h2, h3, h4, h5, h6, .enable-pto").preventTextOrphans();It will skip this element:
<h2 class="disable-pto">Let Us Know What You Think</h2>Initial release.