CSS3 Text temperature

The early 1.CSS attributes are divided into three main categories: font, color, and text:

The 2.CSS text type has 11 properties:

Note: There is also a color attribute: color, which is used primarily to set the text color

3.css3 Text Shadow properties: Text-shadow
Syntax: Text-shadow:none | <length> None | [<shadow>,] * <shadow> or none | <color> [, <color]*
That is: text-shadow:[colour color] X-axis displacement (x-offset) y-axis displacement (Y-offset) blur radius (Blur-radius), *
Color: Shadow color, define the drawing shadow is the color used, this parameter can be placed in the first can also be placed at the end, is an optional parameter, if you do not use the text color as a shadow color, can be: color keywords, hex color, RGB color, rgba transparent color, etc.
X-offset:x axis Displacement, used to specify the amount of horizontal displacement of the shadow, whose value can be positive, positive, shadow on the right side of the object, and shadow on the left side of the object
Y-offset:y axis Displacement, which specifies the vertical offset of the shadow, which can be a positive negative value, if it is positive, the shadow is at the bottom of the object, and the shadow is at the top of the object
Blur-radius: Shadow blur radius, optional parameter, used to set the blur radius of the shadow, which represents the blurred extent of the shadow's outward blur. The larger the value, the greater the blurring of the shadow outward, and the more blurred the edge of the shadow. However, this value can only be positive, with a value of 0 o'clock, which indicates that the shadow does not have a blur effect
Note: Multiple shadows can be specified and can be adjusted independently. Multiple shadows are delimited with commas when multiple shadows are specified. Multiple shadow effects are applied in the order given, so the preceding shadow may overwrite the back, but never overwrite the text itself

Browser compatibility

IE compatibility problem, had to use filter Filter:shadow to deal with. The Filter:shadow filter acts like a dropshadow, but it can also be a shadow effect of the object, but the difference is that the dropshadow can produce a gradual effect, which makes the shadow appear smoother and more subtle.
E {Filter:shadow (color= color value, direction= value, strength= value)}

Browser compatibility
IE compatibility problem, had to use filter Filter:shadow to deal with. The Filter:shadow filter acts like a dropshadow, but it can also be a shadow effect of the object, but the difference is that the dropshadow can produce a gradual effect, which makes the shadow appear smoother and more subtle.
E {Filter:shadow (color= color value, direction= value, strength= value)}
E is the element selector
Color to set the shadow colors of an object
The direction is used to set the direction of the projection, the value is 0 degrees, the shadow is above the text, 45 degrees, the shadow is in the upper right corner of the text, 90 degrees, the shadow is on the right of the text, 135 degrees, the shadow is at the bottom of the text, 180 degrees, the shadow is below the text, 225 degrees. The shadow is on the left side of the text, 315 degrees.
Strength is the shadow intensity, similar to the fuzzy radius of Text-shadow
Note: The filter makes the shadow effect and the Text-shadow production effect is very far

4.css3 Overflow Text properties: Text-overflow
Syntax and parameters: Text-overlfow:clip | Ellipsis
Only two attribute values:
Clip: Do not display ellipsis (... ), just a simple cut
Ellipsis: Display ellipsis when text overflows (... ), the position of the omitted marker insertion is the last character
To achieve text overflow, trim text displays an ellipsis (... ) effect, you also need a mate of two attributes, forcing the text to appear on one line (white-space:nowrap) and overflow content hiding (Overflow:hidden), and you need to define the width of the container

Browser compatibility

Note: The Text-overflow attribute is well supported under the IE series, until Firefox 6 starts to support the application of the Text-overflow:ellipsis attribute, and the opera browser needs to add its unique prefix "-o-" to recognize

5.CSS3 Text line Wrapping
The browser itself has the ability to wrap text. For Western text, the browser will automatically wrap around the half-width space or hyphen, without suddenly wrapping in the middle of the word; for Chinese, you can wrap a line after any text, but when the browser encounters a punctuation mark, it usually wraps the text in front of the punctuation and punctuation as a whole.
White-space property, used to suppress text wrapping
Word-wrap property, which belongs to the proprietary properties of IE
Sometimes text does not wrap automatically, the workaround:
(1) Overflow:auto, use scroll bar to control
(2) Overflow:hidden, directly hidden, to achieve the perfect layout
(3) control by JavaScript scripts
(4) Use CSS3 new attribute Word-wrap property

Word-wrap Property
In CSS3, use the Word-wrap property to implement word wrapping for long words and URL addresses
Syntax and parameters: Word-wrap:normal | Break-word
Normal: The default value, the browser only in half-width spaces or hyphens where the line wrapping.
Break-word: Wrap content within the boundaries (do not intercept English word wrapping), long text and URL address are automatically wrapped, the only imperfect is that it does not break the word line, the long word truncation line, to increase the difficulty of reading
Note: Word-wrap is not effective when applied in <pre> and <table>
Browser compatibility:

6.word-break Property
To determine the handling of automatic line wrapping, through the specific property settings, not only can let the browser achieve half-width space or a hyphen after the line, but also allows the browser to implement any position of the line-wrapping
Syntax and parameters: Word-break:normal | Break-all | Keep-all
Normal: Default value, according to the language's own rules to determine the line-wrapping method, Chinese to the boundary of the man line, English from the whole word line
Break-all: Can forcibly truncate the English word, achieves the word inside the line to change the effect
Keep-all: Child disconnection is not allowed. If it is a Chinese character in the punctuation of a Chinese phrase throughout the line, the English word wraps the whole line; If an English character is longer than the container boundary, the next part will burst into the container; If the border is fixed, the later section cannot be displayed

Browser compatibility

7.white-space Property
Used to declare how whitespace in an element is handled during layout creation
Syntax and parameters: White-space:normal | | Pre | | nowrap | | Pre-line | | Pro-wrap | | Inherit
Value Description:
Normal: Default value. The blank space will be ignored by the browser. You can revert to the default value of the property by this value
Pre: Text margins are withheld by the browser and behave like the <pre> tag effect in HTML
NoWrap: Text does not wrap, text will be on the same line until a newline label is encountered <br/>
Pre-line: Merges the whitespace sequence, but preserves line breaks, this property does not support IE7.0, Firefox3.0, and Opera9.2 versions of browsers
Pro-wrap: Preserves sequence of whitespace characters, but wraps normally, this property value does not support IE7.0 and Firefox3.0 the following versions of browsers
Inherit: Inherits the White-space attribute value of the parent element, the secondary attribute value is not supported in all IE browsers
Browser compatibility

CSS3 Text temperature