Home > Developer > Web Develop
How do I use CSS to control the word count of articles?
Control article title words, not dynamic Web pages of the patent, if the static page using CSS style, can also achieve the same effect!
Look at this example, you can copy to Notepad Save as HTML file to see the effect!
<HTML><title>CSS Control word Count</title><Head><styletype= "Text/css">. DD{Border:Solid 1px Gray;width:180px;Overflow:Hidden;Text-overflow:ellipsis;White-space:nowrap;Course:Hand;}</style></Head><Body><spanclass= "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</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>
After seeing the effect, you should believe that this is not truth, O (∩_∩) o...!
Where the White-space property sets how to handle whitespace within an element.
This property declares how to handle whitespace in elements during layout creation. Values Pre-wrap and Pre-line are new in CSS 2.1
Of
Inheritance: Yes
JavaScript syntax
CSS properties can also be dynamically changed by a piece of JavaScript.
Scripting Syntax:
Object.style.whitespace= "NoWrap" in our HTML DOM tutorial, you can find out more about whitespace properties
The details.
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 style
Description: Set whether to use ellipsis to mark text overflow
Overview: Text-overflow is a style (style) that sets whether to use ellipses to indicate text overflow.
Text-overflow verbose syntax:
Text-overflow:clip | ellipsis
Value:
Clip: Default value. Do not display the ellipsis (...), but simply crop
ellipsis: Displays an ellipsis (...) when the text inside the 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 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 scroll bars appear even if all content can be dropped in the element
box. The
JavaScript syntax
CSS property can also be changed dynamically through 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. The
hidden content is trimmed, but the browser does not display scroll bars for viewing content. The
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 scroll bars to see the rest of the content.
jquery method
$ (". Table-title"). each (function () {var maxwidth=20; * (). Text (). length>maxwidth) { $ (this). Text ($ ( This). Text (). substring (0,maxwidth)); $ (this). HTML ($ (this). html () + "..."); }});
How do I use CSS and jquery to control the number of words in an article title?
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
