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

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.

Syntax:

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

Note:

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.