CSS controls the number of words in the title of an article. It is not a patent for dynamic web pages. If a static page uses CSS styles, the same effect can be achieved!
For example, you can copy the file to notepad and save it as an HTML file!
<HTML>
<Title> CSS control words </title>
<Head>
<Style type = "text/CSS">
. Dd
{
Border: solid 1px gray;
Width: 180px;
Overflow: hidden;
Text-overflow: ellipsis;
White-space: nowrap;
Course: hand;
}
</Style>
</Head>
<Body>
<SPAN class = "DD">
Confidence network uses CSS to control the title of an article.
</Span>
<Br>
<Div class = "DD">
Confidence network uses CSS to control the title of an article.
</Div>
</Body>
</Html>
After seeing the effect, you should believe that this is not a false statement, O (∩ _ ∩) O ...!
Here, the white-space attribute sets how to process the white space in the element.
This attribute declares how to process the blank characters in the element during layout creation. Values pre-wrap and pre-line are added in CSS 2.1.
.
Inheritance: Yes
Javascript syntax
CSS attributes can also be dynamically changed through a piece of JavaScript.
Script Syntax:
Object. style. whitespace = "nowrap" in our HTML Dom tutorial, you can find more information about whitespace attributes.
.
P
{
White-space: normal
}
Possible Value
Value description
Normal default. The blank space is ignored by the browser.
Pre blank is retained by the browser. The behavior is similar to the <PRE> label in HTML.
The nowrap text will not wrap, and the text will continue on the same line until the <br> label is encountered.
Name: Text-Overflow
Category: IE proprietary style
Brief description: sets whether to use ellipsis to indicate text overflow.
Overview: Text-overflow is a style that specifies whether to use a ellipsis to indicate text overflow ).
Text-overflow detailed Syntax:
Text-overflow: Clip | ellipsis
Valid value:
Clip: default value. The omitted mark (...) is not displayed, but a simple cropping
Ellipsis: when the object text overflows, the omission mark (...) is displayed (...)
The overflow attribute is used to set events that occur when the content of an element overflows its region.
Inheritance: No
Description
This attribute defines how the content of the overflow element content area will be processed. If the value is scroll, the user agent provides a rolling mechanism whether or not required. Therefore, it is possible that
You can put all the content in the box and the scroll bar appears.
Javascript syntax
CSS attributes can also be dynamically changed through a piece of JavaScript.
Script Syntax:
Object. style. Overflow = "hidden" in our HTML Dom tutorial, you can find more details about overflow attributes.
In our HTML Dom tutorial, you can also find the complete style object reference manual.
Example
P
{
Overflow: Scroll
}
Possible Value
Value description
Visible default. The content will not be trimmed and will be displayed outside of the element.
The hidden content is trimmed, but the browser does not display the scroll bar for viewing the content.
Scroll content is trimmed, but the browser displays a scroll bar to view other content.
If the content of auto is trimmed, the browser displays a scroll bar to view the remaining content.