WP-Mix

Here are a few choice code snippets to truncate text with jQuery. Useful for fine-tuning responsive layouts, or just truncating strings of text in general.

Basic technique

To shorten any string of text, add the following jQuery snippet:

jQuery(document).ready(function($) {
	$('.target').each(function(index, value) {
		 $(this).html($(this).html().substring(0, 12)); // number of characters
	});
});

To make it work, change .target to match whichever element contains the text that you would like to shorten. Then change the 12 to the number of characters to which the target element should be shortened.

Don’t forget to include jQuery on the page!

Truncate text for specific browser width

This technique build upon the previous by checking the content width after the page is loaded. If the width of the #content element is less than 690 pixels, then the .target text is truncated; otherwise, no text is truncated.

jQuery(document).ready(function($) {
	if ($('#content').width() < 690) {
		$('.target').each(function(index, value) {
			 $(this).html($(this).html().substring(0, 12)); // number of characters
		});
	}
});

As before, change the .target selector to match your own, and change the 12 to the desired character limit. Also change the #content to match your content element. And lastly, change the 690 to the desired width (in pixels). This is a useful technique for tightening up long strings of text in responsive layouts.

Truncate text dynamically (on browser resize)

Here we expand on the previous technique to truncate text to different numbers of characters based on content width. The cool thing about this technique is that it truncates text only when the browser is resized by the user. So it can be combined with the previous technique for a dynamic truncate-text solution.

jQuery(window).resize(function($) {
	if ($('#content').width() < 690) {
		$('.target').each(function(index, value) {
			 $(this).html($(this).html().substring(0, 12)); // number of characters for browser width less than 690px
		});
	} else {
		$('.target').each(function(index, value) {
			 $(this).html($(this).html().substring(0, 24)); // number of characters for browser width greater than 690px
		});
	}
});

With this code, if the width of the content element is less than 690 pixels, the target text is truncated to 12 characters. Otherwise, if the content width is greater than 690 pixels, the target text is truncated to 24 pixels. Again, this technique works when the browser window is resized. So you can combine it with the previous technique to cover both cases: truncate on initial page load AND on browser resize.

To use this technique, edit the content element, target element, browser width, and number of characters to suit your needs. And don’t forget to include jQuery on the page ;)

Truncate by word instead of character

The previous techniques are good if you want to limit the number of characters, but what if you want to limit the number of words? No problems! Plugin Planet provides several techniques for limiting the number of words with jQuery. Scroll down a bit on the page to see the jQuery snippets! :)