- By James Scariati
- October 2015
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>Add the following class to your CSS:
.no-wrap {
white-space: nowrap;
}Then call preventTextOrphans() on the elements where you wish to apply it:
$("h1, h2, h3").preventTextOrphans();The following options are available:
$("h1, h2, h3").preventTextOrphans({
minimum: 2,
wrapperClass: "no-wrap",
wrapperElement: "span"
});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 wordswrapperElement: The HTML element that wraps theminimumnumber of words
HTML tags in the text block are preserved, but are treated as one item, regardless of how many words they contain. For example, given the following HTML:
Let Us Know What <strong>You Think</strong>The entire <strong> tag and its contents will be treated as one "word," so applying preventTextOrphans() will result in four words in the last line of text rather than two:
Let Us Know <span class="no-wrap">What <strong>You Think</strong></span>To be addressed in a future update...