jQuery dot dot dot | Responsive Web Design

jQuery dot dot dot

jQuery dot dot dot takes the current container and applies ellipsis where the design makes sense.

To incorporate it into your site you will need to have jQuery included as well as jQueryDotDotDot. You then apply a class of ellipsis to any containers you want to have this effect.


$(document).ready(function() {
	$(".ellipsis").dotdotdot();
});

If your containers are going to be fluid/flexible, and of course being a responsive website they’re going to be right…., then you need to keep an eye on the fluid width as it changes and re-fire the plugin as the page is resized or a device is reorientated.

For this you need to add a watch on your script

$(document).ready(function() {
	$(".ellipsis").dotdotdot({
		watch: "window"
	});
});

  • Resource Name

    jQuery dot dot dot

  • Resource Creator

    Fred

Description

It uses ellipsis to indicate that there is more text than currently visible?
Isn't that awesome? It's like using overflow: hidden; But PRO-style!

View on Github Download Resource

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.