CSS overflow Text display ellipsis summary of various methods

Grammar:

Text-overflow:clip | Ellipsis

Parameters:
Clip: Do not show ellipsis (...). ), but simply cut
(Clip This parameter is not commonly used!) ）
Ellipsis: Displays an ellipsis (...) when text overflows inside an object. ）

Description
Sets or retrieves whether an ellipsis (...) is used. ) to indicate an overflow of text within an object.
Please note that the Text-overflow:ellipsis property is not effective in FF.

Example:
div {text-overflow:clip;}

Text-overflow is a very special style that we can use instead of the title intercept function we usually use, and it's more friendly to search engines, such as: the title file has 50 characters, and our list may be only 300px wide. If you use the title to intercept the function, then the title is not complete, if we use CSS style text-overflow:ellipsis, the output of the title is complete, only by the size of the container does not show the limit.

Cases

The code is as follows	Copy Code
HTML code: <div> <p><span>css Web designdiv+css Tutorials-www.111cn.net</span><p> </div>

CSS code:

The code is as follows

Copy Code

div{ The basic definition of width:200px;/* container * * height:200px; Background-color: #eee; } /* IE under the style * * P span{ Display:block; width:200px;/* to the width of the definition, according to the circumstances modified * * Overflow:hidden; White-space:nowrap; Text-overflow:ellipsis; } /* FF under the style * * P{clear:both;} P span{ Float:left; max-width:175px; /*ie cannot interpret this property, and FF can be * * } p:after{ Content: "..."; }

Note: Here's another thing to add is that the "Max-width" attribute is used for the width of p span, ie cannot interpret the attribute, and FF can, which avoids the application of IE to span width.

If you don't want to use CSS you can use jquery to implement

-webkit-line-clamp
WebKit supports a property called-webkit-line-clamp, which is actually a webkit-specific unsupported property, which means that this attribute is not part of the standard and may be used internally by the WebKit. or deprecated attribute. But since being discovered, and can use, why not try it ~o (∩_∩) o

The code is as follows	Copy Code
p { Overflow:hidden; Text-overflow:ellipsis; Display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }

demo:http://jsfiddle.net/cople/mab8f/

-o-ellipsis-lastline
Starting with Opera 10.60, the Text-overflow property has a value named-o-ellipsis-lastline. The applied effect is like a name, with an ellipsis on the last line of the text. This method is much simpler than the upstairs method, but it is not within the standard///(ㄒoㄒ)//

The code is as follows	Copy Code
p { Overflow:hidden; White-space:normal; Height:3em; Text-overflow:-o-ellipsis-lastline; }

demo:http://jsfiddle.net/cople/ash5v/

Jquery
Are there any cross-browser solutions in addition to the proprietary properties of individual browsers? Of course, through JS implementation! (by removing the end character one after the other until the element's height is less than the parent element height)

The code is as follows	Copy Code
$ (". Figcaption"). each (function (i) { var DIVH = $ (this). Height (); var $p = $ ("P", $ (this)). EQ (0); while ($p. Outerheight () > Divh) { $p. Text ($p. Text (). replace (/(s) * ([a-za-z0-9]+| W) (...)? $/, "...")); }; });

demo:http://jsfiddle.net/cople/drml4/5/