For example, I thought it was complicated to handle text overflow. I didn't expect such a simple sentence to be done. css is amazing:
The code is as follows: |
Copy code |
. Li {white-space: nowrap; overflow: hidden; text-overflow: ellipsis ;} |
This only uses the text-overflow attribute in CSS. This attribute is special and cannot be found in the current CSS Manual, but CSS3 has the relevant description: text-overflow-mode.
It has three values: clip, ellipsis, and ellipsis-word.
Clip: no omitted mark (…) is displayed (...), It's just simple cutting;
Ellipsis: when the object text overflows, the omission mark (…) is displayed (...), The last character is inserted.
Ellipsis-word: When the text in the object overflows, the omission mark (…) is displayed (...), The last word is omitted ).
Text-overflow is special. It cannot work independently, but must be followed by overflow: hidden as a supplementary description. If we want to add this effect to a paragraph, we can write:
The code is as follows: |
Copy code |
P { White-space: nowrap; Width: 100%;/* the width of IE6 needs to be defined */ Overflow: hidden; -O-text-overflow: ellipsis;/* Opera */ Text-overflow: ellipsis;/* IE, Safari (WebKit )*/ } |
Firefox7.0 began to be compatible with text-overflow: ellipsis; in this way, the ellipsis in the future can be compatible with the browser. The code snippet is:
Width: 200px;/* set the width */
White-space: nowrap;/* set to ignore rows */
Text-overflow: ellipsis;/* This is the ellipsis */
-O-text-overflow: ellipsis;/* compatible with opera */
Overflow: hidden;/* Hide when the value exceeds the upper limit */
One instance
The code is as follows: |
Copy code |
[Html] <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "zh" lang = "zh"> <Head profile = "http://www.w3.org/2000/08/w3c-synd/#"> <Meta http-equiv = "content-language" content = "zh-cn"/> <Meta http-equiv = "content-type" content = "text/html; charset = gb2312"/> <Title> code in place of vertices that overflow text in div </title> <Style type = "text/css"> /* <! [CDATA [*/ Li { Width: 200px; White-space: nowrap; Text-overflow: ellipsis; -O-text-overflow: ellipsis; Overflow: hidden; } /*]> */ </Style> </Head> <Body> <Ul> <Li> <a href = "#"> web standard FAQ </a> </li> <Li> <a href = "#"> web standard FAQ </a> </li> <Li> <a href = "#"> web standard FAQ </a> </li> <Li> <a href = "#"> web standard FAQ </a> </li> <Li> <a href = "#"> web standard FAQ </a> </li> </Body> </Html> [/Html] |
The attributes are as follows:
White-space: nowrap; indicates that the text will not wrap and will continue on the same line until the <br> label is met;
Overflow: hidden; if the content beyond the object size is not displayed, the excess content is hidden;
Text-overflow: ellipsis; when the text object overflows, it is displayed.... Of course, if the property is set to clip, the dot is not displayed;