CSS Notes (iv) text

　　CSS Text properties Define the appearance of text. Text properties allow you to change the color of text, the spacing of characters, align text, decorate and indent text, and so on.

　　Reference: http://www.w3school.com.cn/css/css_text.asp

• Indent text

First Line indent:

{text-indent: 5em;}

Negative indent to achieve "hanging indent" and so on:

{text-indent: -5em; padding-left: 5em;}

• Horizontal alignment

<center> affects both the text center and the center of the entire element. The text-align does not affect the alignment of the elements, but only affects the text.

{text-align:Center}  {text-align:left}{text-align:Right}

• spacing between words

The default value is normal, which is the same as setting a value of 0.

{word-spacing: 30px;}  {word-spacing: -0.5em;}

• Letter Spacing

Change the spacing between characters or letters.

{letter-spacing: -0.5em}  {letter-spacing: 20px}

• Character conversions

Text case conversion, total none,uppercase,lowercase and capitalize (first capitalization) four values.

{text-transform: uppercase}

• Text decoration

The text is decorated with a total of none,underline,overline,line-through and blink five values.

{text-decoration: underline overline;}

• Working with whitespace characters

Affects the processing of spaces, line breaks, and tab characters in the source document.

{white-space: normal;}

The following table summarizes the behavior of the White-space property:

Wrap

value	whitespace characters	line Break	Line
Pre-line	Merge	Keep	Allow
Normal	Merge	Ignore	Allow
NoWrap	Merge	Ignore	Not allowed
Pre	Keep	Keep	Not allowed
Pre-wrap	Keep	Keep	Allow

• Text direction

Used to set the text orientation. The example below is shown from right to left.

Div   {      direction: RTL  }

Note: for inline elements, the direction property is applied only if the Unicode-bidi property is set to embed or bidi-override.

CSS Text Properties

Properties	Description
Color	Set Text color
Direction	Sets the text orientation.
Line-height	Sets the row height.
Letter-spacing	Sets the character spacing.
Text-align	Aligns the text in the element.
Text-decoration	Add adornments to text.
Text-indent	Indents the first line of text in an element.
Text-shadow	Sets the text shadow. CSS2 contains this property, but CSS2.1 does not preserve it.
Text-transform	Controls the letters in the element.
Unicode-bidi	Sets the text orientation.
White-space	Sets how whitespace is handled in the element.
Word-spacing	Sets the word spacing.

CSS Notes (iv) text