<style type= "Text/css" >
#cs {width:100px;height:50px;line-height:50px;color: #6699ff; border:1px #ff8000 Dashed;overflow:hidden; Text-overflow:ellipsis}
#cs2 {width:200px;height:60px;line-height:20px;color: #6699ff; border:1px #ff8000 Dashed;overflow:hidden; Text-overflow:ellipsis}
</style>
<body>
<div id= "CS" >
<nobr> fall in love with your smile--text beyond the display ellipsis, you can copy this code to experiment under the </nobr>
</div> <br>
<div id= "CS2" >
</div>
</body>
Text-overflow:ellipsis overflow text display ellipsis in detail method
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.
For information on how the Text-overflow attribute is applied, we explain the following:
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.
After the text is out of the Div, the text is hidden and displayed ...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
