Home > CSS > Manage Text Overflow CSS + Javascript

Manage Text Overflow CSS + Javascript

Using text-overflow
The text-overflow declaration allows you to deal with text that does not fit into its container element. The ellipsis value causes three periods to be appended to the text. You can see the text-overflow property details in http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

The text-overflow only applicable when:
1. The box has overflow other than visible (with overflow: visible the text simply flows out of the box)
2. The box has white-space: nowrap or a similar method of constraining the way the text is layed out.
So the element style should be most likely

p.element {
	width:200px /* As your need */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

The text-overflow property is supported in all major browsers, except Firefox.
So we need alternative solution for firefox and here it is JQuery Text Overflow plugin.
jQuery Text Overflow plugin

This jQuery plugin implements a simplified version of the CSS3 text-overflow property.
You can download this from http://www.bramstein.com/projects/text-overflow/

It’s very simple. You just need to download and add a reference to the jquery.text-overflow.js or
jquery.text-overflow.min.js and then you can use like bellow.

$('.element').textOverflow();
Advertisements
Categories: CSS
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: