Detailed explanation of several methods of intercepting characters with css (css typesetting hides overflow text)

Detailed explanation of several methods of intercepting characters with css (css typesetting hides overflow text)_CSS/HTML

WBOY

Release： 2016-05-16 12:03:38

Original

2792 people have browsed it

Method 1:

Copy code The code is as follows:

A string of any length

Note: The advantage is that the content can be any HTML element, including hyperlinks and pictures, etc. In IE6, an ellipsis will be automatically displayed at the end. The disadvantage is that the width value must be specified, and the width cannot be a percentage, otherwise it will be regarded as a percentage of the total character length in IE.

Method 2:

Copy code The code is as follows:

Note: The advantage is that the width can be set as a percentage. But the disadvantage is that the content can only be plain text and cannot have hyperlinks and other content.

CSS truncates strings CSS implements automatic text truncation, the code is as follows:

Copy code 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, its syntax is as follows:

Copy code The code is as follows:

text-overflow:clip | ellipsis
clip : Do not display the omission mark (...), but simply crop it
ellipsis: Display the omission mark (...) when the object overflows into the inner text

It should be noted that this attribute is exclusive to IE! However, IE is not the only one available. Although this tag is not publicly supported and adopted by Guaioh, it is included in the private attributes of many browsers. Text-overflow alone will not work. It must be combined with white-space:nowrap;overflow:hidden;. The function of the previous sentence is to force all text to be displayed on the same line until the end of the text or the br object is encountered.

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

Syntax:

Copy code The code is as follows:

white-space: normal | pre | nowrap

Value:

Copy code The code is as follows:

normal : Default value. Default processing method. Text automatically handles line breaks. If the container boundary is reached, the content will go to the next line
pre: Newlines and other whitespace characters will be protected. This value requires IE6 or !DOCTYPE declared as standards-compliant mode support. If the !DOCTYPE declaration does not specify standards-compliant mode , this attribute can be used, but will have no effect. The result is equivalent to normal . See pre object
nowrap: Forces all text to be displayed on the same line until the end of the text or a br object is encountered. See the noWrap attribute

Description:

Set or retrieve the processing method of space characters within the object.

Space characters, like newlines, spaces, and TAB, are ignored by default in HTML documents. When this property is set to normal or nowrap , you can use the non-breaking-space named entity to add whitespace and the br element to add newlines. This property has the same effect on content you manipulate using the Document Object Model (DOM) as it does on content displayed by IE.

This property works on block objects.

This property is read-only for the currentStyle object. For other objects can be read and written.

The corresponding script attribute is whiteSpace .