CSS3 text overflow displays ellipsis and css3 text ellipsis

CSS3 text overflow displays ellipsis and css3 text ellipsis

CCS3 attributes-text-overflow: ellipsis; usage and precautions

Syntax:

Text-overflow: Clip | ellipsis

Default Value: clip.

Applicable to: All elements

Clip: when the object text overflows, the omitted mark (...) is not displayed, but the overflow part is cut out.
Ellipsis: when the object text overflows, the omission mark (...) is displayed (...).

Http://hovertree.com/h/bjaf/pr_text-overflow.htm for more information

During use, it is sometimes found that the flag is not omitted. After testing, it is found that when ellipsis is used, it must be combined with overflow: hidden; white-space: nowrap; width: 200px; these three styles work together. The sample code is as follows:

<Style type = "text/css">. test {text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 360px ;} </style> <div class = "test"> welcome to <a href = "http://hovertree.com/"> what to ask </a>! Hovertree.com css3 enables text overflow to display ellipsis. <A href = "http://hovertree.net/"> Midi download </a> </div>

View effects: http://hovertree.com/h/bjaf/1hg11eg4.htm

Exercise: http://hovertree.com/tiku/bjaf/curs4a42.htm

Web Front-end summary: http://www.cnblogs.com/jihua/p/webfront.html