CSS3 text and css3

CSS3 text and css3

1. Early CSS attributes are divided into three categories: font, color, and text:

2. the CSS text type has 11 attributes:

Note: there is also a color attribute: color, which is mainly used to set the text color.

3. CSS3 text shadow attribute: text-shadow
Syntax: text-shadow: none | <length> none | [<shadow>,] * <shadow> or none | <color> [, <color] *
That is, text-shadow: [color] x axis displacement (x-offset) y axis displacement (y-offset) blur radius (blur-radius ),*
Color: Specifies the color used to draw a shadow. This parameter can be placed first or last. It is an optional parameter. If not, text color is used as the shadow color, can be: Color keywords, hexadecimal color, RGB color, RGBA transparent color, etc.
X-offset: x-axis displacement, used to specify the horizontal displacement of shadow. Its value can be positive or negative, positive, and shadow on the right of the object. Otherwise, the shadow on the left of the object.
Y-offset: y-axis offset, which is used to specify the vertical offset of the Shadow. The value can be positive or negative. If the value is positive, the shadow is at the bottom of the object, and the shadow is at the top of the object.
Blur-radius: Specifies the blur radius of the Shadow. An optional parameter is used to set the blur radius of the shadow, representing the blur range of the shadow. The greater the value, the greater the range of the shadow to the outside, and the blurrier the edge of the shadow. However, this value can only be a positive value. If its value is 0, it indicates that the shadow has no blur effect.
Note: You can specify multiple shadows and adjust them independently. Use commas to separate Multiple shadows. Multiple shadow effects are applied in a given order. Therefore, the shadow above may overwrite the shadow, but it will never overwrite the text itself.

Browser compatibility

To solve IE compatibility problems, you have to use the filter: shadow filter. Filter: the shadow filter works similar to dropshadow. It can also produce shadow effects for objects. The difference is that dropshadow can produce progressive effects, while shadow is smoother and more delicate.
E {filter: shadow (Color = Color value, ction = value, Strength = value )}

Browser compatibility
To solve IE compatibility problems, you have to use the filter: shadow filter. Filter: the shadow filter works similar to dropshadow. It can also produce shadow effects for objects. The difference is that dropshadow can produce progressive effects, while shadow is smoother and more delicate.
E {filter: shadow (Color = Color value, ction = value, Strength = value )}
E is the element selector.
Color is used to set the shadow Color of an object.
Direction is used to set the Direction of projection. The value is 0 degrees, and the shadow is on the text; 45 degrees, the shadow is on the top right corner of the text; 90 degrees, the shadow is on the right side of the text; 135 degrees, shadow is in the lower right corner of the text; 180 degrees; 225 degrees; shadow is in the lower left corner of the text; 270 degrees; shadow is on the left side of the text; 315 degrees; shadow is in the upper left corner of the text
Strength is the shadow intensity, similar to the Blur radius of text-shadow.
Note: The shadow effect produced by the filter is very different from that produced by text-shadow.

4. CSS3 overflow text attribute: text-overflow
Syntax and parameters: text-overlfow: clip | ellipsis
There are only two attribute values:
Clip: do not show the omitted mark (...), just simple cropping
Ellipsis: when the text overflows, the omission mark (...) is displayed. The omission mark is inserted at the last character.
To achieve the effect of omitting labels (...) for cropping text when text overflow occurs, you also need to combine the two attributes to force the text to be displayed in one line (white-space: nowrap) and overflow content hiding (overflow: hidden), and the container width must be defined.

Browser compatibility

Note: The text-overflow attribute is well supported in the IE series and does not support text-overflow: ellipsis attributes until Firefox 6, opera Browser also needs to add its unique prefix [-o-] to identify

5. CSS3 text line feed
The browser itself provides the function of wrapping text. For western text, the browser will automatically wrap lines in spaces or hyphens, rather than in the middle of a word. for Chinese, it can wrap lines behind any text, however, when a browser encounters a punctuation mark, a text in front of the punctuation mark is usually used as a unified line feed.
White-space attribute, used to disable text wrapping
Word-wrap attribute, which belongs to the proprietary attribute of IE
Sometimes text does not wrap automatically. solution:
(1) overflow: auto, which is controlled by the scroll bar.
(2) overflow: hidden, which is directly hidden to achieve the perfection of layout.
(3) control through Javascript scripts
(4) use the new word-wrap attribute of CSS3

Word-wrap attributes
In CSS3, use the word-wrap attribute to automatically wrap long words and URLs.
Syntax and parameters: word-wrap: normal | break-word
Normal: the default value. The browser only performs line breaks in spaces or hyphens.
Break-word: Wrap the content within the boundary (do not intercept the English word line), long text and URL are automatically wrapped, The only bad thing is that it does not wrap by word, truncates long words to wrap a line, making reading more difficult.
Note: In <pre> and <table>, word-wrap has no effect.
Browser compatibility:

6. word-break attributes
To determine the processing method of automatic line feed. Through specific attribute settings, not only can the browser implement a half-width space or line feed after a hyphen, but also can let the browser implement line feed at any position
Syntax and parameters: word-break: normal | break-all | keep-all
Normal
Break-all: Can forcibly intercept English words to achieve the effect of line feed in words
Keep-all: Sub-disconnections are not allowed. If a Chinese character contains a Chinese character phrase in the punctuation marks, the English word is wrapped. If an English character length exceeds the container boundary, the subsequent part breaks through the container; if the border is fixed, the subsequent parts cannot be displayed.

Browser compatibility

7. white-space attributes
It is used to declare how to deal with the blank spaces in elements during layout creation.
Syntax and parameter: white-space: normal | pre | nowrap | pre-line | pro-wrap | inherit
Value description:
Normal: default value. The blank space is ignored by the browser. You can use this value to restore the default value of the property.
Pre: the blank text space will be held by the browser. Its behavior is similar to the <pre> tag effect in HTML.
Nowrap: The text will not wrap, and the text will be on the same line until a line break label is encountered. <br/>
Pre-line: merges the blank character series, but retains line breaks. This attribute does not support browsers earlier than IE7.0, Firefox3.0, and Opera9.2.
Pro-wrap: Reserved blank character sequence, but line feed is normal. This attribute value does not support browsers earlier than IE7.0 and Firefox3.0
Inherit: inherits the white-space attribute value of the parent element. This attribute value is not supported by all IE browsers.
Browser compatibility