Several ways to use CSS to intercept characters (CSS layout hides overflow text) _css/html

Method One:

Copy Code code as follows:

<div style= "width:300px;  Overflow:hidden; Text-overflow:ellipsis; White-space:nowrap; " > Strings of arbitrary length </div>

Description: The advantage is that the content can be any HTML element, including hyperlinks and pictures, etc., in the IE6 will also automatically display ellipses at the end. The disadvantage is that you must specify the width value, and the width cannot be a percentage, otherwise it will be considered as a percent of the total character length in IE.

Method Two:

Copy Code code as follows:

<input type= "text" style= "width:100%; Cursor:default; border-width:0;  Border-style:none; Background-color:transparent "Value=" string of arbitrary length readonly/>

Note: The advantage is that the width can be set to a percentage. But the disadvantage is that content can only be plain text, not hyperlinks and so on.

CSS truncation string CSS is the implementation of automatic text truncation, the code is as follows:

Copy Code code as follows:

div.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, whose syntax is as follows:

Copy Code code as follows:

Text-overflow:clip | Ellipsis
Clip: does not show ellipsis (...), but rather simple trimming
Ellipsis: Displays an ellipsis (...) when an object overflows inside text.

Note: This property is IE-specific! However, it is not only ie available. The label, although not well-behaved, is publicly supported, but is contained by the private properties of many browsers. Text-overflow alone is not functional, must have White-space:nowrap;overflow:hidden, the two lines of the coordination side can be. The previous sentence is to force all text to be displayed in the same line until the text ends or the BR object is encountered.

It is easy to see that the best place to use Text-overflow is not the text, but the list of headings or summaries that are displayed in a single line.

Grammar:

Copy Code code as follows:

White-space:normal | Pre | NoWrap

Take value:

Copy Code code as follows:

Normal: Default value. The default processing method. Text is automatically processed for line wrapping. If you reach the container boundary, the content will go to the next line
Pre: newline and other whitespace characters will be protected. This value needs ie6+ or! DOCTYPE declared as Standards-compliant mode support. If! DOCTYPE declaration is not specified as Standards-compliant mode, this property is available, but does not work. The result is equivalent to normal. See Pre Object
NoWrap: Forces all text to be displayed in the same line until the text ends or the BR object is encountered. See NoWrap properties

Description

Sets or retrieves how the space characters within an object are handled.

Whitespace characters, like newline, spaces, TAB, are ignored by default in HTML documents. When this property is set to Normal or nowrap, you can add a space by using a named entity that does not break the line space and use a BR element to add a newline. This property affects the content you use for the Document Object Model (DOM) operation as it does for IE display content.

This property acts on a block object.

This property is read-only for Currentstyle objects. is writable for other objects.

The corresponding script attribute is whitespace.