Home > Developer > CSS

A summary of the method of automatically adding ellipsis for text overflow with JS and CSS

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

1. General CSS Method--can implement Ie,safari,chrome,opera browser text overflow ellipsis representation
This is a test text, mainly used to test whether the text overflow will be displayed with ellipses.

The code is as follows Copy Code
Zxx_text_overflow_1{width:27em; white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis; overflow: Hidden;}

2. Use Ellipsis.xml file to enable Firefox to support text overflow after the dot dot ellipsis representation
This code calls the Ellipsis.xml file across the folder path, looking at the Firefox browser is enough text overflow ellipsis representation.
PS: in Firefox under the div content display blank, this div content is: "This code adds a cross folder path to the Ellipsis.xml file, see Firefox browser is enough text overflow ellipsis notation."

The code is as follows Copy Code
. zxx_text_overflow_2{width:27em white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;- Moz-binding:url ('.. /xml/ellipsis.xml#ellipsis '); Overflow:hidden;}

This code calls the Ellipsis.xml file of the same folder path, looking at the Firefox browser is enough text overflow ellipsis representation.
PS: In Firefox, above the div text overflow ellipsis display, this div content is "This code calls the same folder path of the Ellipsis.xml file, look at Firefox browser is enough text overflow ellipsis notation." So far, almost all mainstream browsers implement literal overflow ellipsis representations.

The code is as follows Copy Code
. zxx_text_overflow_3{width:27em white-space:nowrap; text-overflow:ellipsis;-o-text-overflow:ellipsis;- Moz-binding:url (' ellipsis.xml#ellipsis '); Overflow:hidden;}

Here's a small conclusion: the Ellipsis.xml file, which makes the text overflow ellipsis in the Firefox browser, is either in the same directory on the page or in the next directory (which I have tested) and is invalidated if you go up across folder access or absolute path access. The reason is unknown!


JS Implementation code

The code is as follows Copy Code

<title>js text overflow automatically add ellipsis ellipsis-compatible version </title>
<style type= "Text/css" >
* {margin:0;padding:0;font-size:12px;}
#div {width:200px;height:200px;}
#div2 {width:300px;height:200px;}
. ellipsis {border:1px solid red;font-size:12px;line-height:25px;word-wrap:break-word;}
</style>
<script type= "Text/javascript" >
function Formatellipsis () {
var arr=[];
var adiv=document.getelementsbytagname ("*");
for (Var i=0;i<adiv.length;i++) {
if (adiv[i].classname== "ellipsis") {
Arr.push (Adiv[i]);
}
}
for (Var i=0;i<arr.length;i++) {
New ellipsis (Arr[i]);
}
}
function ellipsis (obj) {
This.obj=obj;
This._style=[];
This._width=getstyle (this.obj, "width");
This._height=getstyle (this.obj, "height");
This._fontsize=getstyle (This.obj, "fontsize");
This._lineheight=getstyle (This.obj, "lineheight");
var limit=this.format ();
alert (limit);
var _html=obj.innerhtml;
Obj.innerhtml=_html.substring (0,limit) + "...";
}
Ellipsis.prototype.format=function () {
var _html=this.obj.innerhtml;
var _len=_html.length;
var _lines=math.floor (this._width/this._lineheight);
var _cols=math.floor (this._width/this._fontsize);
return _lines*_cols-3;
}
function GetStyle (e,p) {
var s= e.currentstyle? E.CURRENTSTYLE[P]: Document.defaultView.getComputedStyle (E,null) [P];
return parseint (s);
}
Window.onload=function () {
Formatellipsis ();
}
</script>
<body>
<div id= "div" class= "ellipsis" > Hello hello hello hello hello hello hello hello hello hello hello hello hello hello how are you hello hello hello you hello hello hi you how are you hello you hello you hello hello hello hello hello hello hello hello hello hello hello hello hello hi you hello hello hello hello you hello hello you you you hello hello you you hi Hello hello hello hello hello hello hello hello hello hello hello you hello hello you hello hello hi hello hello hello hi you you hello hello hello hello hello hi hello hi you how are you how are you how are you?
<div id= "Div2" class= "ellipsis" >nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn

Nnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnn</div>
</body>

CSS text overflow automatically add ellipses

1. Compatible Ie6/ie7/firefox
2. Text object: Text in table, cannot wrap
3. If the use of JS interception, support resize, and ensure the efficiency of the page execution
4. Make sure the ellipsis appears under Firefox

The code is as follows Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>css text interception </title>
<style type= "Text/css" >
Body{font-size:13px;color: #8c966b;}
div{clear:both;width:340px;border:1px solid #333; margin:3px;padding:3px;}
Div a{color: #8c966b; text-decoration:none;}
Div A:hover{text-decoration:underline;}
Div A{display:block;width:310px;white-space:nowrap;overflow:hidden;float:left;
-o-text-overflow:ellipsis; * For Opera * *
Text-overflow:ellipsis; /* for IE *
}
Div:after{content: "...";p adding-left:3px;font-size:12px;} * For Firefox/*
</style>
<body>
<div><a href= "" > Use CSS to achieve automatic interception of text, do not require the use of background programs and JS </a></div>
<div><a href= "" > Benefits are: Conducive to content integrity, conducive to SEO, without the background program processing, can be at the front of the time to adjust the length of interception. </a></div>
<div><a href= "" > Bad Place: Can not automatically judge the length of interception, when the characters are very short in Firefox will also generate the following ellipsis. </a></div>
<div><a href= "" > Also, when setting the width of the interception, be aware that you should try to intercept the text completely </a></div>
</body>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
summary of how to get away with murder example of get and post method department of education adding grades use of static method in java with example css first of class zen of css design signature of method
Related Article
Web page production of CSS Super Skill big Broadcast collection
Selenium using Xpath+css+javascript+jquery positioning method...
Create animations using @keyframes in CSS3, examples
Detailed four property value usages common in CSS Display pro...
How to use Border-radius in CSS3? Examples of Border-radius d...
In-depth analysis of css float attributes in webpage settings

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More