HTML uses CSS to let the text out of the section with the ellipsis three points display method case

Source: Internet
Author: User

HTML uses CSS to make the text out of the section with an ellipsis of three points to display the method:

I use the following code correctly, Li inside is a mark. Use in IE and Google is normal, Firefox does not know, I do not care, waiting for you to test

li{

Display:block;overflow:hidden;word-break:keep-all;white-space:nowrap;text-overflow:ellipsis;

}

Just take this CSS style to use it, programming, solve just fine, do not look at the following.

Grammar:

Text-overflow:clip | Ellipsis

Parameters:

Clip: Do not show ellipsis (...), but simple trim

(Clip This parameter is not used!)

Ellipsis: Display ellipsis (...) when text inside an object overflows

Description

Sets or retrieves whether an ellipsis tag (...) is used. Indicates an overflow of text within an 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.

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.

Example:

Pre-modification effects:

Modify the effect later:

HTML uses CSS to let the text out of the section with the ellipsis three points display method case

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.