How to implement CSS to limit the number of words, beyond the partial display point point.

How to implement CSS limit word count, beyond the partial display point point ...

<div style= "width:200px; White-space:nowrap;overflow:hidden;text-overflow:ellipsis; border:1px solid Red "> try to try it try try try try try try try it </div>

Effect:

Grammar:

Text-overflow:clip | Ellipsis

Parameters:

Clip: Do not display the ellipsis tag (...). ), but a simple cut

(Clip This parameter is not used!) ）

Ellipsis: Displays ellipsis (...) when text inside an object overflows. ）

Description

Sets or retrieves whether an ellipsis tag (...) is used. ) indicates an overflow of text within the 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, we can use it instead of the title intercept function we usually use, and this is more friendly to search engines, such as: the title file has 50 characters, and our list may be only 300px width. If the title intercepts the function, then the title is not complete, if we use CSS style text-overflow:ellipsis, the output title is complete, but only by the size of the container is not displayed.

The Text-overflow property is only annotations, and whether the ellipsis is displayed when text overflows. No other style attribute definitions are available. We want the effect of an ellipsis to occur when the overflow is implemented. You must also define: Force text to appear on one line (white-space:nowrap) and overflow content to be hidden (Overflow:hidden). This is the only way to achieve an overflow text display ellipsis effect.

Sometimes a piece of text is too long, will affect the entire layout, many people use dynamic language to solve this problem, but must distinguish between Chinese and English, because the Chinese equivalent of two English characters length, so not only cumbersome, but also increased the burden of the server. In fact, we can use CSS perfectly to solve this problem,

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;  <!--These three sentences,,, hehe ....->

How to implement CSS to limit the number of words, beyond the partial display point point.