CSS beyond the hidden implementation of the limit Word function code (multi-browser support)

Source: Internet
Author: User

<HTML><title>CSS Control word Count</title><Head><styletype= "Text/css">. DD{Border:Solid 1px Gray;width:180px;Course:Hand;Overflow:Hidden;White-space:nowrap;Text-overflow:ellipsis; /*For IE*/-o-text-overflow:ellipsis; /*For Opera*/-icab-text-overflow:ellipsis; /*For ICab*/-khtml-text-overflow:ellipsis; /*For Konqueror Safari*/-moz-text-overflow:ellipsis; /*For Firefox,mozilla*/-webkit-text-overflow:ellipsis; /*For Safari,swift*/}</style></Head><Body>    <spanclass= "DD"style= "Display:block">confidence net use CSS control article title Word Count confidence net use CSS control article title Word Count confidence net use CSS Control article title words</span>    <BR>    <Divclass= "DD">confidence net use CSS control article title Word Count confidence net use CSS control article title Word Count confidence net use CSS Control article title words</Div></Body></HTML>

Note The:<span> label is not a block label, and if there is no way to display it as expected, you need to change it to a block label and add the style= "Display:block" style.

Object.style.whitespace= "NoWrap" in our HTML DOM tutorial, you can find more details about the whitespace property.

P

{

White-space:normal

}

Possible values

Value Description

Normal default. The blank will be ignored by the browser.

The pre blank is reserved by the browser. It behaves like a <pre> tag in HTML.

The nowrap text does not wrap, and the text continues on the same line until the <br> tag is encountered.

Name: Text-overflow

Category: IE proprietary styles

Summary: Set whether to use ellipses to indicate text overflow

Overview: Text-overflow is a style (style) that sets whether to use ellipses to indicate text overflow.

Text-overflow Detailed Syntax:

Text-overflow:clip | Ellipsis

Value:

Clip: Default value. The ellipsis (...) is not displayed, but is simply trimmed

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

The overflow property sets what happens when the content of an element overflows its area.

Inheritance: No

Description

This property defines how the content of the overflow element's content area will be handled. If the value is scroll, the user agent provides a scrolling mechanism, whether or not it is required. Therefore, it is possible that even elements

You can drop everything in the box and the scroll bar will appear.

JavaScript syntax

CSS properties can also be dynamically changed by a piece of JavaScript.

Scripting Syntax:

Object.style.overflow= "hidden" in our HTML DOM tutorial, you can find more details about the overflow property.

In our HTML DOM tutorial, you can also find the full Style object reference manual.

Example

P

{

Overflow:scroll

}

Possible values

Value Description

Visible default. The content is not trimmed and is rendered outside the element.

Hidden content is trimmed, but the browser does not display scroll bars for viewing content.

Scroll content is trimmed, but the browser displays scroll bars to see the rest of the content.

Auto If the content is trimmed, the browser displays a scroll bar to view the rest of the content.

CSS beyond the hidden implementation of the limit Word function code (multi-browser support)

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: info-contact@alibabacloud.com 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.