Home > Developer > JavaScript
Code for CSS exceeding the hidden limit (supported by multiple browsers) and css words
<Html> <title> css control words </title>Note: <span> the label is not a block label. If it cannot be displayed as expected, you need to change it to a block label and add the style = "display: block.
Object. style. whiteSpace = "nowrap" in our html dom tutorial, you can find more details about the whiteSpace attribute.
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.
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...>
In Firefox, how can I use CSS to limit the number of words and display them as dots?<Html>
<Head>
<Style type = "text/css">
Body {
Font-family: Arial, Helvetica, sans-serif;/* font. */
Font-size: 12px;/* the font size is 12 pixels. */
}
Div {
Width: 200px;/* the width of the layer. */
Height: 24px;/* the height of the layer. */
Line-height: 24px;/* line spacing. */
Border: # ccc solid 1px;/* solid line with a layer border of 1 pixel gray. */
Background-color: # F9F9F9;/* background color */
Margin: 5px;/* The distance is 5 pixels */
}
Div {
Color: #000;/* the color of the hypertext hyperlink */
Display: block;/* defined as block level */
Width: 150px;/* width of the text to be displayed */
Float: left;/* left alignment */
Overflow: hidden;/* Hide the excess parts. */
White-space: nowrap;/* replace the ellipsis (...) in areas not displayed */
Padding-right: 7px;/* The text is 7 pixels away from the right side. */
Text-overflow: ellipsis;/* supports IE */
-O-text-overflow: ellipsis;/* supports Opera */
}
Div: after {content: "...";}/* supports Firefox */
</Style>
</Head>
<Body>
<Div> <a href = "#"> CSS intercepts a string and uses a ellipsis instead of sdfsdfdsfsdfdsfdsfdsfds. </a> </div>
<Div> <a href = "#"> CSS intercepts strings and replaces them with ellipsis (...) </a> </div>
</Body>
</Html>
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
