CSS implements the word limit function, and css implements the word count function.
Html code
Effect:
Syntax:
Text-overflow: clip | ellipsis
Parameters:
Clip: do not show the omitted mark (...), but simply crop
(Clip is not commonly used !)
Ellipsis: when the object text overflows, the omission mark (...) is displayed (...)
Note:
Sets or retrieves whether an omission mark (...) is used to indicate text overflow in the object.
Note that the text-overflow: ellipsis attribute has no effect in FF.
Example:
Div {text-overflow: clip ;}
Text-overflow is a special style. We can use it instead of the title truncation function we usually use, and it is more friendly to search engines. For example, the title file contains 50 Chinese characters, our list may only have a width of PX. If the function is intercepted by the title, the title is incomplete. If we use the CSS style text-overflow: ellipsis, the output title is complete, it is not displayed due to the limitation of the container size.
The text-overflow attribute is only an annotation, and whether the omitted mark is displayed when the text overflows. Does not have other style attribute definitions. We want to achieve the effect of saving the number when overflow occurs. It must also be defined to force the text to be displayed (white-space: nowrap) in a row and overflow: hidden ). Only in this way can the overflow text display effect be achieved.
Sometimes a text segment is too long, which will affect the entire layout. Many people use dynamic languages to solve this problem, but they must distinguish Chinese and English because Chinese is equivalent to the length of two English characters, this is not only cumbersome, but also increases the burden on the server. In fact, we can use CSS to solve this problem perfectly,
Html code
This is implemented by a program, and styles cannot be implemented. Unless you use positioning, it is not recommended.
Css cannot limit the number of words and can only be hidden. Overflow: hidden;
A row can have ellipsis:
Overflow: hidden;
White-space: nowrap;
Text-overflow: ellipsis;
How does CSS limit the number of characters displayed in text?
<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: the default value of clip. The omitted mark (...) is not displayed, but a simple cropping
Ellipsis: when the text in the object 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 full text of St...>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
