Use CSS to intercept character CSS layout to hide overflow text

Method One:

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

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

Method Two:

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

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

CSS truncation string CSS is the implementation of automatic truncation of text, the code is 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:

Text-overflow:clip | Ellipsis

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

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

Note that: This property is dedicated to IE! However, it is not only ie available. Although the label is not well-supported, it is included in many browsers ' private properties. Text-overflow alone is ineffective and must have white-space:nowrap;overflow:hidden; The two sentences can be matched. The function of the previous sentence is to force the display of all text within the same line until the text ends or encounters a BR object.

It is not difficult to see that the best place to use Text-overflow is not the text of the article, but rather a list of headings or summaries to display on a single line.

Grammar:

White-space:normal | Pre | NoWrap

Value:

Normal: Default value. The default processing mode. Text automatically handles line breaks. If you arrive at the container boundary, the content will go to the next line

Pre: line breaks and other whitespace characters will be protected. This value requires ie6+ or! DOCTYPE statement for Standards-compliant mode support. If! The DOCTYPE declaration is not specified as Standards-compliant mode, and this property can be used but does not work. The result is equal to normal. See Pre objects

NoWrap: Forces the display of all text within the same line until the text ends or encounters a BR object. See NoWrap properties

Description

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

Whitespace characters, like line breaks, spaces, TAB, are ignored by default in HTML documents. When this property is set to Normal or nowrap, you can use a named entity that does not wrap spaces to add spaces and add line breaks with a BR element. The effect of this property on the content of your use of the Document Object Model (DOM) operation is the same as its effect on the content of IE display.

This property acts on the Block object.

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

The corresponding script attribute is whitespace.