Small CSS experience: Reprint-CSS text overflow ellipsis: Text-overflow: ellipsis

(Reproduced: http://blog.163.com/yinwei_666/blog/static/2036157320101113102733794)

 

In many cases, for example, the most basic article list of a website, the title will be very long, but the area width of the display list is not so wide, at this time, the most normal way is to use the ellipsis (…) for some text that exceeds the width (...) . The common practice is to intercept website background programs.

This title is already a common topic. In many cases, for example, the most basic article list of a website, the title will be very long, but the area width of the display list is not so wide, at this time, the most normal way is to use the ellipsis (…) for some text that exceeds the width (...) . The common practice is that the website background program intercepts certain characters and then outputs them to the front-end display or the front-end uses JavaScript to intercept certain characters. However, there is still a big problem if the characters are intercepted by controlling the number of words, due to the character width problem of Chinese and English characters, the word count is difficult to control and the versatility is poor. Is there a better solution, such as using CSS directly? Of course, there is.

Text-overflow is a special attribute in W3C earlier documents (the current document does not contain the text-overflow attribute, FML !) Its definition is:

Name: Text-overflow-Mode
Value: Clip | ellipsis-word
Clip: No omitted mark (…) is displayed (...), But simple cropping.
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 ).

Why do I say text-overflow is a special style at first? Because we can use it to replace the title truncation function we usually use, and it is more friendly to search engines, such as: the title file has 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 excess part is shown as omitted mark ...).

Text-overflow: The ellipsis attribute is only an annotation. Whether to display the omitted flag 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.

Reference: http://www.52css.com/article.asp? Id = 602

 

If we want to define text-overflow: ellipsis for the p tag, we can write it like this:

Before using the style:

After the style is used:

 

Text-overflow guide:

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.

Test results:

　　1. Define only text-overflow: ellipsis; ellipsis is not supported.

　　2. Define text-overflow: ellipsis; white-space: nowrap; similarly, it cannot achieve ellipsis.

III,At the same time, the application: Text-overflow: ellipsis; white-space: nowrap; overflow: hidden; achieves the desired effect of displaying ellipsis in the overflow text.

 

 

 

Browser compatibility

Firefox does not support this attribute! This time, Firefox is too different! Is there any other way? Of course, there are many methods.
For example, the-moz-binding CSS attribute recommended by Mozilla Developer Center. The reason given by Mozilla Developer Center is that text-overflow does not have W3C specifications... However, Firefox supports XUL, an XML user interface language. Firefox also supports XBL, an XML binding language, so that we can use the-moz-binding CSS attribute recommended by Mozilla Developer Center to bind the ellipsis attribute in XUL.

 

 

1. XUL Mode

 

First, we create XUL, which should be saved as ellipsis. xml:

Then we need to put this XML file into a directory, and the original CSS needs to be added to the file.

 

Although Firefox implements ellipsis through XUL, pay attention to the following issues:
1. You cannot select any text that has been processed by XUL. The-moz-user-select: Text attribute will allow the text to be selected, but I have not tried it successfully.
2. If you bind XUL to the parent element, the content of the child element becomes invisible. For example:

If you only bind xul to the p node, you will not see the content of Haha in Firefox.
Its source code is actually:
<P> it is a long <em> Haha </em> long text! </P>

 

2. Javascript
Since XUL cannot perfectly solve text overflow display in Firefox ..., So let's turn to Javascript. Of course, it's not an ancient method of intercepting a certain number of characters.
Here we use jquery as an example. The Code is as follows:

The principle of this section of JS is very simple, that is, by constantly comparing the width value, and then shortening the character width one by one. When the final width is appropriate, the loop is stopped, and the text overflow display is realized... .