WideText - Responsive Text Resize Plugin

WideText is a compact jQuery plugin that allows you to create fully responsive text elements that will resize accordingly to the width of the browser window.

How to use:

1. Include jQuery Script and jquery.wideText.js

( function($) {
	$.fn.wideText = function() {
		return this.each( function() {
			// Add "wtext" class to each element and then set up the magic
			var	obj = $(this),
				rtext = obj.addClass( 'wtext' );
 
			// Work that magic each time the browser is resized
			$(window).on( 'resize', function() {
				obj.css( { 'fontSize': parseInt( obj.css( 'fontSize' ) ) * ( obj.parent().width() / obj.width() ) + 'px', 'visibility' : 'visible' } );
			} ).resize();
		});
	};
} )(jQuery);

2. call the WideText function

$(window).load( function() {
	$( '.responsive' ).wideText();
} );

3. The CSS

.wtext {
	white-space: nowrap;
	display: inline-block;
	}

---

This awesome jQuery plugin is developed by cbavota. For more Advanced Usages, please check the demo page or visit the official website.