Css rendering (2) text, css rendering text

Css rendering (2) text, css rendering text

I. Text Style

First line indent text-indent

The first line of indentation is to indent the first line of the paragraph, which is a common text formatting effect. Generally, there are two spaces at the beginning of Chinese writing. [Note] This attribute can be negative. It can be applied to block-level elements (including block and inline-block)

<Div> <p> text-indent: 2em "> the AFC Champions League is the highest level of club competition in Asia </p> <p> equivalent to the European Champions League and the South American liberation Cup in South America </p> </div>

Word-spacing

Word spacing is used to set the spacing between words or words. [Note] the word interval can be negative. The spacing between words = word-spacing + space size. It takes effect only when spaces are required.

<Div> word-spacing: 27px "> transportation fee: </div>

Letter interval letter-spacing

The letter interval refers to the Character spacing. [note] the letter interval can be negative.

<Div> letter-spacing: 5px "> quantity: </div>

Text conversion text-transform

Text conversion is used to process English case conversion.

Value: uppercase (uppercase) | lowercase (lowercase) | capitalize (uppercase) | none | inherit

Initial Value: none

<Div>Text-decoration
The text modifier is used to provide the modifier line for the text. [note] the color of the text modifier line is the same as that of the text line.
Value: none | [underline (underline) | overline (upper line) | line-through (middle line)] | inherit
Initial Value: none
<Div> normal: combines blank spaces, and supports automatic line feed. nowrap: merges blank spaces, does not allow automatic line feed pre-line: merges blank spaces (excluding line breaks), and supports automatic line feed. pre: do not merge blank characters, do not allow automatic line feed pre-wrap: Do not merge blank characters, allow automatic line feed (based on pre, retain automatic line feed)
<Div>
Text wrap word-wrap
The browser provides the Text wrap function. The text container can wrap automatically on the right.
For English, the browser will automatically wrap the line in a space or a hyphen, instead of a sudden line break in the middle of the word.
For Chinese, you can wrap a line after any text, but when a browser encounters a punctuation mark, it usually includes the punctuation mark and the previous text as a whole.
Word-wrap
The word-wrap attribute is used to automatically wrap long words or URLs.
Value: normal | break-word
Initial Value: normal
Word-wrap: normal)
[Note] When the white-space value is nowrap or pre, the word-break and word-wrap attributes are invalid.
<Div>
 
Ii. Text OverflowText-overflow
<Div class = "text"> long English fffffffffffffffff </div>
        .text{            width: 80px;            background: red;            overflow: hidden;            white-space: nowrap;            text-overflow: ellipsis;        }
When it is added when it is not added
 
3. text shadow
Similar to the box shadow, text shadow has four values: X axis offset, Y axis offset, blur radius, and shadow color, but there is no shadow size or internal shadow.
Text-shadow
Value: none | (h-shadow v-shadow blur color) +
Initial Value: none
H-shadow: horizontal shadow position (required) v-shadow: vertical shadow position (required) blur: fuzzy distance (this value cannot be negative, optional) color: shadow color, the default value is the same as the text color (optional)
<Div class = "text"> test text </div>
        .text{            width: 100px;            height: 100px;            text-shadow: 2px 2px 3px green;        }