Several Methods for capturing characters with css (css layout hides overflow text) _ CSS/HTML

Source: Internet
Author: User
This article mainly introduces several methods to intercept characters with css. For more information, see Method 1:

The Code is as follows:

String of any length

Note: The content can be any HTML element, including hyperlinks and images. The ellipsis is automatically displayed at the end of IE6. The disadvantage is that the width value must be specified, and the width cannot be a percentage. Otherwise, it is considered as the percentage of the total length of characters in IE.

Method 2:

The Code is as follows:

Note: The advantage is that the width can be set to a percentage. However, the disadvantage is that the content can only be plain text and cannot contain hyperlinks or other content.

CSS truncation string CSS implements automatic text truncation. The Code is as follows:

The Code is as follows:

P. test {

Width: 200px;

Height: 14px;

Overflow: hidden;

White-space: nowrap;

Text-overflow: ellipsis;

Text-overflow: ellipsis;/* IE/Safari */

-Ms-text-overflow: ellipsis;

-O-text-overflow: ellipsis;/* Opera */

-Moz-binding: url ("ellipsis. xml # ellipsis");/* FireFox */


The key is text-overflow. Its syntax is as follows:

The Code is as follows:

Text-overflow: clip | ellipsis
Clip: do not show the omitted mark (...), but simply crop
Ellipsis: when the object's inner text overflows, the omission mark (...) is displayed (...)

Note that this attribute is dedicated to IE! However, it is not only available for IE. Although this tag is not publicly supported, it is included in the private attributes of many browsers. Text-overflow alone does not work. It must be compatible with white-space: nowrap; overflow: hidden. The purpose of the previous sentence is to force all texts to be displayed in the same row until the text ends or the br object is encountered.

It is not hard to see that the best place to use text-overflow is not the text of the article, but the list of titles or summaries displayed in a single row.


The Code is as follows:

White-space: normal | pre | nowrap

Valid value:

The Code is as follows:

Normal: default value. The default processing method. Text automatically processes line breaks. If the container boundary content arrives, it will go to the next line.
Pre: line breaks and other blank characters are protected. This value must be IE6 + or! DOCTYPE is declared as standards-compliant mode. If! The DOCTYPE declaration is not specified as standards-compliant mode. This attribute can be used but does not work. The result is equivalent to normal. See pre object
Nowrap: forces all text to be displayed in the same row until the text ends or the br object is encountered. See noWrap attributes


Sets or retrieves the processing method of space characters in an object.

Space characters, such as line breaks, spaces, and tabs, are ignored by default in HTML documents. When this attribute is set to normal or nowrap, you can add spaces by using a named entity that does not wrap spaces, and use the br element to add line breaks. This attribute has the same impact on the content you operate on using the Document Object Model (DOM) as on the content displayed on IE.

This attribute acts on block objects.

This attribute is read-only for currentStyle objects. Other objects can be read and written.

The corresponding script feature is whiteSpace.

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: 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.