Home > Developer > Web Develop
The original Published time: 2009-09-16--from my Baidu article [imported by moving tools]
Ellipsis () Apply "Go" in CSS
The definition of the Text-overflow property in the CSS manual:
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.
Our home page has created an unordered list of UL, which has several list items inside Li, which internally establishes a link to the listing. Our test is mainly in Li, please observe, see the following three-segment code:
First, only define text-overflow:ellipsis; The ellipsis effect cannot be achieved.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>it55</title>
<style type= "Text/css" >
UL {width:300px; margin:50px auto;}
Li {width:300px; line-height:25px; text-overflow:ellipsis;}
A {color: #03c; font-size:13px;}
a:hover {color: #000;}
</style>
<body>
<ul>
<li><a href= "/" >css-Pro CSS techniques </a>
<li><a href= "/" >CSS Combat: ID is sniper gun class is a double-edged sword and confrontation can only points two defeats </a>
<li><a href= "/" >css layout instance: CSS Tag switch code example Tutorials </a>
<li><a href= "/" >web Standard: Change your way of thinking about Web authoring save code and structure and performance separation </a>
<li><a href= "/" > fix several methods of no-state pseudo-class are not supported in IE7 version below! </a>
<li><a href= "/" >css remove form TD default spacing and make 1px thin Line table </a>
</ul>
</body>
Second, the definition of text-overflow:ellipsis; White-space:nowrap; The ellipsis effect is also not possible.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>it55</title>
<style type= "Text/css" >
UL {width:300px; margin:50px auto;}
Li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}
A {color: #03c; font-size:13px;}
a:hover {color: #000;}
</style>
<body>
<ul>
<li><a href= "/" >css-Pro CSS techniques </a>
<li><a href= "/" >CSS Combat: ID is sniper gun class is a double-edged sword and confrontation can only points two defeats </a>
<li><a href= "/" >css layout instance: CSS Tag switch code example Tutorials </a>
<li><a href= "/" >web Standard: Change your way of thinking about Web authoring save code and structure and performance separation </a>
<li><a href= "/" > fix several methods of no-state pseudo-class are not supported in IE7 version below! </a>
<li><a href= "/" >css remove form TD default spacing and make 1px thin Line table </a>
</ul>
</body>
Third, according to the it55.com tutorial, that is, the method described herein, at the same time application: text-overflow:ellipsis; White-space:nowrap; Overflow:hidden; Achieve the desired overflow text display ellipsis effect:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title>it55</title>
<style type= "Text/css" >
UL {width:300px; margin:50px auto;}
Li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
A {color: #03c; font-size:13px;}
a:hover {color: #000;}
</style>
<body>
<ul>
<li><a href= "/" >css-Pro CSS techniques </a>
<li><a href= "/" >CSS Combat: ID is sniper gun class is a double-edged sword and confrontation can only points two defeats </a>
<li><a href= "/" >css layout instance: CSS Tag switch code example Tutorials </a>
<li><a href= "/" >web Standard: Change your way of thinking about Web authoring save code and structure and performance separation </a>
<li><a href= "/" > fix several methods of no-state pseudo-class are not supported in IE7 version below! </a>
<li><a href= "/" >css remove form TD default spacing and make 1px thin Line table </a>
</ul>
</body>
Please note that the Text-overflow:ellipsis property is not effective in FF.
Copy the content and copy it directly to the HTML file to see how it works.
<style>
. text-overflow{
display:block;/* inline objects need to be added */
width:200px;
word-break:keep-all;/* does not change the line */
white-space:nowrap;/* does not change the line */
overflow:hidden;/* content is hidden when content is out of width */
text-overflow:ellipsis;/* display ellipsis (...) when text inside an object overflows; use with Overflow:hidden; */
}
. table{
width:300px;
table-layout:fixed;/* only the table-defined layout algorithm is fixed, the following TD definition will work. */
}
. Table td{
width:100%;
word-break:keep-all;/* does not change the line */
white-space:nowrap;/* does not change the line */
overflow:hidden;/* content is hidden when content is out of width */
text-overflow:ellipsis;/* display ellipsis (...) when text inside an object overflows; use with Overflow:hidden; */
}
</style>
<body>
<div class= "Text-overflow" >
Also attached are a few just learned page design of the small experience
1, the width of the page talbe is set to 100% to the right or will leave a scroll bar blank, can be added in the body tag:
<body style= "Overflow:auto" >
2.
@font-face {font-family:comic;src:url (HTTP://URL/FONT.EOT);}
You can define a font name that is not on-premises and invoke the method:
<span style= "font-family:comic;" >just CD boy!</span>
3, Firefox document.createelement does not support the content of HTML tags, also does not support innertext, but support innerHTML, you can use innerHTML to specify its content.
Crop when text is too long (show ellipses or only crop with CSS method without program)
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
