CSS truncation is a disgusting problem. In order to take care of performance needs, it is often necessary to cut short sentences that are too long, such as a headline in a list.
This is usually handled by programmers using background technology (a variety of popular languages, PHP, JSP, etc.) or foreground technology (JAVASCRIPT). I am personally inclined to use the foreground technology, because it is good for improving the affinity of Web pages (accessibility). In a non-desktop browser, users can more easily grasp the integrity of information.
Text-overflow is a property of CSS3 that truncates a long string and determines how the truncated part is displayed based on the value. At present, IE has implemented its support, opera also has a private attribute (-o-text-overflow) to its support, Firefox seems to be a step behind ... Both can be supported using the ellipsis value, replacing the truncated part with an ellipsis (i.e., ellipsis).
So, all you have to do is to set the width of the elements that need to be truncated and use them together with overflow to achieve the effect.
But Firefox doesn't support it, so you probably know what I'm going to do next. :)
Take a look at Yahoo's solution: http://blog.360.yahoo.com/blog-ktYYK_s5fqJ2Hu1ryv2QSL0-?p=120。 Daniel is Daniel, XBL and JavaScript are two-pronged.
Then, my solution is to use the pseudo class: After adding the ellipsis, and then positioning it to the right. The effect is a bit rough, but simple and clear, pure CSS implementation.
The specific process does not say, look at the case, interested people look at the source code, it is easy to understand.
<! doctypehtml Public "-//w3c//dtd XHTML 1.0 strict//en" "//www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd" ><ptml xmlns= "//www.w3.org/1999/xhtml" xml:lang= "en" ><pead> <meta http-equiv= "Content-type" content= "text/" Html;charset=utf-8 "/> <meta name=" Author "content=" Chen Xian, aka Realazy "/> <meta" copyright "Name=" Creative Sharing (creativecommons),//www.creativecommons.cn/licenses/by-nc-sa/1.0/"/><title> using CSS truncation </title> <style type= "Text/css" > * {margin:0; padding:0;} a {text-decoration:none; color: #df3a0e;} UL {width:200px; margin:40px auto; padding:12px 4px 12px 24px;border:1px solid #005fb0 background: #e0f1ff;} li {m ARGIN:12PX 0;width:200px; Li a {display:block; width:200px; overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis; Text-overflow:ell Ipsis; /* Firefox only/Li:not (p) {/* WTF is/pls let me know*/clear:both;} li:not (P) a {max-width:170px; float:left;} Li:not (P): After {content: "..."; Float:lEft width:25px;padding-left:5px; Color: #df3a0e; } </style></pead><body> <ul> <li><a href= "#" title= "the artwork" > The introduction of the artwork </a></li > <li><a href= "#" title= "In addition to food have back, a car, but a color. Also a bitter field of the flow has and for the will" > In addition to the food have back, the stock car but color again a bitter field of the flow has and for the </a></li > <li><a href= "#" title= "Face days also produce poison to know what to do, the foot stream to add heart? "The > surface of the day also produce poison to know what, the foot stream to add heart?" </a></li><li><a href= "#" title= "as near as the back of the house, the star West to remember as the real person" > as near the back of the house, the star West is remembered as the real person </a></li ><li><a href= "#" title= "is more able to unite the sound of the voice, the small end of the road to the light of the regular selection of his things have to eat a bit more than a small back to the establishment of the law to start cutting its friends to the mainland to see the growing" > more can be a group to adjust the sound of silence, The little knot is going to be a regular choice. He has to eat a bit more than a small back to the establishment of the law to start cutting its friends to the mainland to see the </a></li><li><a href= "" # "title=" of the phase of the plane to fly leaves and white sense, In the face of the years before the head of the south of the brain he called "open" > of the phase of the white sense, in the face of the years before the line of the head of a few South brain he called Open the original </a></li> </ul></body> </ptml>
