Keyword: text-overflow:ellipsis
Syntax: Text-overflow:clip | Ellipsis
Take value
Clip: Default value. The ellipsis (...) is not displayed, but is simply trimmed.
Ellipsis: Displays an ellipsis (...) when the text inside the object overflows.
Unfortunately Text-overflow is only the private property of IE, it is not included in the standard.
If you want to have a container (div or Li or ... Block-level elements) display a line of text, when the text content is too large, do not wrap, but appear ...
Write this: for example
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 2 <HTMLxmlns= "http://www.w3.org/1999/xhtml"> 3 <Head> 4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> 5 <title></title> 6 <styletype= "Text/css"> 7 #box{width:100px;Background-color:#87CEEB;padding:2px 3px;Overflow:Hidden;Text-overflow:ellipsis;White-space:nowrap;} 8 </style> 9 </Head> Ten <Body> One <DivID= "box">I am a little gray ash. I am a little gray ash. I am a little gray ash. I'm a little gray.</Div> A </Body> - </HTML>
Note: Overflow:hidden; Text-overflow:ellipsis;white-space:nowrap; Be sure to use it together.
1. Be sure to define a width for the container.
2. If the Overflow:hidden is missing, the text will stand laterally to the outside of the easy
3. If the white-space:nowrap is missing, the text will hold the height of the container down, even if you define the height, the ellipsis will not appear, the extra text will be cut off
4. If Text-overflow:ellipsis is missing, the extra text will be cut off, which is the equivalent of defining Text-overflow:clip.
If the container is a table, when the text content is too large, do not wrap, but appear ...
Write this: for example:
1 <!DOCTYPE HTML Public "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> 2 <HTMLxmlns= "http://www.w3.org/1999/xhtml"> 3 <Head> 4 <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> 5 <title></title> 6 <styletype= "Text/css"> 7 Table{Table-layout:fixed;width:106px;} 8 TD{padding:2px 3px;Border:1px solid #000;Overflow:Hidden;Text-overflow:ellipsis;White-space:nowrap;} 9 </style> Ten </Head> One <Body> A <Tablecellspacing= "0"cellpadding= "0"><TR><TD>I am a little gray ash. I am a little gray ash. I am a little gray ash. I'm a little gray.</TD></TR></Table></Body> - </HTML>
Attention:
1. Be sure to define table-layout:fixed for table; only if the layout algorithm that defines the table is fixed, the following TD definition will work.