Html Code :
CSS code:
Div {
Width: 200px;/* basic definition of the container */
Height: 200px;
Background-color: # Eee;
}
/* Style under ie */
P span {
Display: block;
Width: 200px;/* defines the width. Modify the width as needed */
Overflow: hidden;
White-space: nowrap;
Text-overflow: ellipsis;
}
/* Style under FF */
P {clear: Both ;}
P span {
Float: left;
Max-width: 175px;/* ie cannot interpret this attribute, while FF can */
}
P: After {
Content :"...";
}
========================================================== ==========
The following is a detailed process. If you want to continue learning, please read it. If you do not want to learn it, please use the above results directly.
--------------------------------------------------------------
Learning:
Today, a friend asked a question on the message board of 52css.com: Why is text-overflow: ellipsis ineffective? Text-overflow is a special attribute. In the CSS manual, this attribute is defined as follows:
Syntax:
Text-overflow: Clip | ellipsis
Parameters:
Clip: do not show the omitted mark (...), but simply crop
(Clip is not commonly used !)
Ellipsis: when the object text overflows, the omission mark (...) is displayed (...)
Note:
Sets or retrieves whether an omission mark (...) is used to indicate text overflow in the object.
Note that the text-overflow: ellipsis attribute has no effect in ff.
Example:
Div {text-overflow: Clip ;}
Text-overflow is a special style. We can use it instead of the title truncation function we usually use, and it is more friendly to search engines. For example, the title file contains 50 Chinese characters, our list may only have a width of PX. If the function is intercepted by the title, the title is incomplete. If we use the CSS style text-overflow: ellipsis, the output title is complete, it is not displayed due to the limitation of the container size.
The following describes how to apply text-overflow attributes:
The text-overflow attribute is only an annotation, and whether the omitted mark is displayed when the text overflows. Does not have other style attribute definitions. We want to achieve the effect of ellipsis during overflow. It must also be defined to force the text to be displayed (white-space: nowrap) in a row and overflow: hidden ). Only in this way can the overflow text display effect be achieved.
On our homepage, an unordered list ul is created, which contains several list items Li and the List link a is established internally. Our tests are mainly carried out in Li. Please observe and read the following three sections of code:
1. Define only text-overflow: ellipsis; ellipsis is not supported .
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> 52css </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>
</Head>
<Body>
<Ul>
<Li> <a href = "http://www.52css.com/"> CSS practice-Pro CSS Techniques </a>
<Li> <a href = "http://www.52css.com/"> CSS practice: ID is a sniper rifle. Class is a double-edged sword.
<Li> <a href = "http://www.52css.com/"> CSS layout example: CSS Tag switching code example tutorial </a>
<Li> <a href = "http://www.52css.com/"> web standards: changes the way you think about creating web pages to save on code, structure, and performance separation </a>
<Li> <a href = "http://www.52css.com/"> solutions IE7 or earlier versions do not support several methods without a State pseudo class! </A>
<Li> <a href = "http://www.52css.com/"> CSS remove table TD default spacing and create a 1px line table </a>
</Ul>
</Body>
</Html>
2. Define text-overflow: ellipsis; white-space: nowrap; similarly, it cannot achieve ellipsis.
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> 52css </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>
</Head>
<Body>
<Ul>
<Li> <a href = "http://www.52css.com/"> CSS practice-Pro CSS Techniques </a>
<Li> <a href = "http://www.52css.com/"> CSS practice: ID is a sniper rifle. Class is a double-edged sword.
<Li> <a href = "http://www.52css.com/"> CSS layout example: CSS Tag switching code example tutorial </a>
<Li> <a href = "http://www.52css.com/"> web standards: changes the way you think about creating web pages to save on code, structure, and performance separation </a>
<Li> <a href = "http://www.52css.com/"> solutions IE7 or earlier versions do not support several methods without a State pseudo class! </A>
<Li> <a href = "http://www.52css.com/"> CSS remove table TD default spacing and create a 1px line table </a>
</Ul>
</Body>
</Html>
3. Follow the 52css.com tutorial, that is, the method described in this article, and apply: Text-overflow: ellipsis; white-space: nowrap; overflow: hidden; the results show the ellipsis in the overflow text:
However, please note that this method is applicable to IE and opbrowser, and FF is not applicable!
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> 52css </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>
</Head>
<Body>
<Ul>
<Li> <a href = "http://www.52css.com/"> CSS practice-Pro CSS Techniques </a>
<Li> <a href = "http://www.52css.com/"> CSS practice: ID is a sniper rifle. Class is a double-edged sword.
<Li> <a href = "http://www.52css.com/"> CSS layout example: CSS Tag switching code example tutorial </a>
<Li> <a href = "http://www.52css.com/"> web standards: changes the way you think about creating web pages to save on code, structure, and performance separation </a>
<Li> <a href = "http://www.52css.com/"> solutions IE7 or earlier versions do not support several methods without a State pseudo class! </A>
<Li> <a href = "http://www.52css.com/"> CSS remove table TD default spacing and create a 1px line table </a>
</Ul>
</Body>
</Html>
Bytes --------------------------------------------------------------------------------------------------------------------
Issues solved:
(It may not be perfect for your reference only .)
Single-line text control, previously causedProgramCompleted by members to achieve the word cut effect.
In text earlier than 52css.com, we also introduced that CSS can also achieve this effect:
How do I set the ellipsis (...) to be displayed for the excess part of the List (LI?
Http://www.52css.com/article.asp? Id = 148
CSS basics: Text-overflow: Detailed Method for displaying ellipsis in ellipsis overflow text
Http://www.52css.com/article.asp? Id = 602 (The Learning Article above is the content of the above two connections)
The above two methods are described previously. They have some limitations.It can work on IE, but it is invalid in ff.
In ff, the text is truncated without adding "…". The method introduced today is compatible with IE ff. For details, refer to the following:
To be more practical, I use a div to install the content to be debugged and define a width for this Div.
For example:
CSS code:
Div {width: 200px ;}
HTML code:
<Div>
<Span> CSS web design I love CSS-Standardized Web Div + CSS tutorial-www.52css.com </span>
</Div>
The implementation in IE is very simple. CSS is as follows:
Example source code [Www.52css.com] SPAN {However, the above style cannot be used in FF, because text-overflow: ellipsis; is unique in IE (non-CSS standard ). What we can see in FF is to remove the overflow content"Overflow Removal", Now let's talk about the idea. unconventional methods are required to implement in FF:One label is used for content removal, and another label is used to fill the ellipsis.And the length can exceed the container width. In this example, the DIV width is PX.
So let's continue the experiment. We have basically solved this problem about the cut-off content. Just fill in the ellipsis without Js. If we use CSS to implement it, we need to use a pseudo object after, if a pseudo object does not understand it, you need to take a look at the temperature or Baidu. Start with HTML and add a p tag to the span tag (you can also add other tags)
Example source code [Www.52css.com] HTML code:
We will add a style for this p tag.
Example source code [Www.52css.com] CSS:
This is not enough, because the ellipsis has a width, so that the ellipsis jumps to the line. The following is to make the width of the span plus ellipsis not greater than the container width (accurate to equal ), and let the ellipsis keep up with the content. The following is the CSS style to solve the above problems:
Example source code [Www.52css.com] P {clear: Both ;}
Here, we need to add that the "Max-width" attribute is used for the width of P span. ie cannot interpret this attribute, but FF can, this avoids the re-application of IE to the span width. The above mentioned chaos is summarized as follows:
Example source code [Www.52css.com] HTML code:
CSS code:
Div {
Width: 200px;/* basic definition of the container */
Height: 200px;
Background-color: # Eee;
}
/* Style under ie */
P span {
Display: block;
Width: 200px;/* defines the width. Modify the width as needed */
Overflow: hidden;
White-space: nowrap;
Text-overflow: ellipsis;
}
/* Style under FF */
P {clear: Both ;}
P span {
Float: left;
Max-width: 175px;/* ie cannot interpret this attribute, while FF can */
}
P: After {
Content :"...";
}
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
