Abandon background programs and JS and use CSS to automatically intercept text

Author：Eve Cole Update Time：2009-05-31 01:04:50

Using css to automatically intercept text does not require background programs and JS. The benefits of using it are: compatible with IE, firefox, Opera; good for content integrity; good for SEO; no need for background program processing; the length to be intercepted can be adjusted at any time in the foreground .
Disadvantages: The interception length cannot be automatically determined. When the characters are very short, subsequent ellipses will be generated in Firefox.
In addition, when setting the interception width, pay attention to try to make the text interception complete.

Run the demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http ://www.w3.org/1999/xhtml"> <head> <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:"...";padding-left:3px ;font-size:12px;}/* for Firefox */ </style> </head> <body> <div><a href="">Use css to automatically intercept text, without the need for background programs and JS The advantage of using </a></div> <div><a href=""> is that it is beneficial to the integrity of the content and SEO, without the need for background program processing, and the length to be intercepted can be adjusted at any time in the foreground. </a></div> <div><a href="">Disadvantages: The interception length cannot be automatically determined. When the characters are very short, subsequent ellipsis symbols will also be generated in Firefox. </a></div> <div><a href="">In addition, when setting the interception width, be careful to make the text interception as complete as possible</a></div> </body> </html>