/prevent-text-orphans

Dynamically prevent text orphans by enforcing a minimum number of words in the last line of any text block

Primary LanguageCSS

Prevent Text Orphans

  • By James Scariati
  • October 2015

Description

Dynamically prevent text orphans by enforcing a minimum number of words in the last line of any text block.

View Demo

Dependencies

Use

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();

Options

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 to 2
  • wrapperClass: The class name to use on the HTML element that wraps the minimum number of words
  • wrapperElement: The HTML element that wraps the minimum number of words

Notes

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