CSS style with extra words displayed as ellipses

<! DOCTYPE html>
 


Note:


Syntax: Text-overflow:clip | Ellipsis


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



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.



For a description of how the Text-overflow attribute is applied, we explain the following:

 　　 

The Text-overflow property is only a note, and whether or not an ellipsis is displayed when the text overflows. No other style attribute definitions are available. We want to implement an ellipsis effect when overflow occurs. You must also define: Force the text to appear in one line (white-space:nowrap) and the overflow content as hidden (Overflow:hidden). This is the only way to achieve the effect of overflow text display ellipses.