Ellipsis in Web

 

It is common in Web development. That is, the text is too long, and the container of the text is not long enough, and we do not want to wrap the text, so we want to use ellipsis to solve this problem. However, in today's HTML standards, there are no relevant identifiers or attributes that allow you to simply do this. But we can use CSS style sheets to do this. It can be used in IE, Safari, Chrome, and Opera. But it does not work in Firefox, but we can use jQuery to solve the problem of Firefox incompatibility. The following is a sample code.

Use CSS to set ellipsis

View Source Code

Print help

1
overflow: hidden;

2
text-overflow: ellipsis;

3
-o-text-overflow: ellipsis;

4
white-space: nowrap;

5
width: 100%;

• OverflowProperty is required, and the property is hidden.
• White-space: nowrapIt is also required. If the text can be automatically wrapped, there will be no ellipsis even if it is invisible. Because the Text wrap does not exceed the container size, there will be no ellipsis.
• WidthThis attribute is set only when IE6 is required. Set to 100% only to solve the incompatibility problem of IE6. (For incompatibility issues in IE, refer to the nine most common IE bugs and their fix on this site.)
• Text-overflow: ellipsisThe ellipsis is set. Currently, it is not a standard HTML specification. It is introduced by IE and can work on IE6 +, Safari 3.2 +, and Chrome.
• -O-text-overflow: ellipsisIt is supported by Opera. It can be used in Opera 9.0 +.

Use jQuery to set ellipsis

As mentioned earlier, Firefox does not support ellipsis in CSS, because it is not a standard HTML specification. Therefore, we need to use jQuery Javascript to do this. You can download the jQuery ellipsis plug-in written by Devon Govett. Therefore, you can simply assign "ellipsis" to some components or CSS definitions, as shown below:

View Source Code

Print help

1
$(document).ready(function() {

2
$('.ellipsis').ellipsis();

3
}

Or

View Source Code

Print help

1
$("span").ellipsis();