1. Text alignment (horizontal direction) text-align
This property can control the alignment of text within the label, but also the sub-control element and the alignment element rows in the block-level element row (horizontal direction)
It has three values:
left: Left (default)
center: Align
right: right alignment
<!DOCTYPE html>
<html>
<body>
<div style="text-align:center">
div的文本
<psan>子元素span</psan>
</div>
<div style="text-align:right">
div的文本
<psan>子元素span</psan>
</div>
</body>
</html>
This property quilt elements inherit
2. The text-indent text-indent
Indentation for block-level elements define the contents of the first row, the default is 0
This property is valid for the lines of text within the tag and the element, the row block-level elements
<!DOCTYPE html>
<html>
<body>
<div>默认文本</div>
<div style="text-indent:50px">缩进50px的文本</div>
<div>
<span>默认的子元素span</span>
</div>
<div style="text-indent:50px">
<span>缩进50px的子元素span</span>
</div>
</body>
</html>
This property will be inherited his child elements (if the child element is a row within the block-level elements, indented 2)
<div style="text-indent:50px">
<div style="background-color: brown">子元素div的文本</div>
</div>
<div style="text-indent:50px">
<span style="background-color: brown;display: inline-block;">子元素(行内块级元素)的文本</span>
</div>
3. Text modified text-decoration
This property Possible values are:
none by default. Text defined criteria.
A line defined in underline text.
A line is defined on the overline text.
line-through line is defined through the text.
<div>默认无修饰</div>
<div style="text-decoration: underline">underline 下划线</div>
<div style="text-decoration: overline">overline 上划线</div>
<div style="text-decoration: line-through">line-through 删除线</div>
<div style="text-decoration: blink">blink</div>
4. The character and word spacing letter-spacing / word-spacing
letter-spacing control member is a single character pitch (including characters), and word-spacing is the spacing control word (Chinese characters invalid)
<div>this is a good day（默认）</div>
<div style="letter-spacing: 10px;">this is a good day</div>
<div style="letter-spacing: 10px;">你好世界</div>
<div style="word-spacing: 10px;">this is a good day</div>
<div style="word-spacing: 10px;">你好世界</div>
The text orientation direction
There are two direction values:
LTR default. Text direction from left to right.
rtl text direction from right to left.
However, this property does not refer to the direction of the text, but sometimes it is similar to text-align
<div>你好世界（默认）</div>
<div style="direction:rtl">direction:rtl</div>
<div style="text-align: right;">text-align: right</div>
It is strictly controlled in the order between the sub-elements (of course, these sub-elements can be block-level element)
<!DOCTYPE html>
<html>
<body>
<div>你好世界（默认）</div>
<div style="direction:rtl">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
<div style="text-align: right;">
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
Case 6. Control text attribute text-transform
text-transform property has four values:
none by default. Defined text with lowercase and uppercase letters standards.
capitalize the first letter of the word capitalized
uppercase all uppercase letters.
lowercase all lowercase letters.
<div>hello world</div>
<div style="text-transform: capitalize">hello world</div>
<div style="text-transform: uppercase">hello world</div>
<div style="text-transform: lowercase">hello world</div>
7. Handling and wrap text blank white-space
white-space characters display blank control, while control whether Wrap
white-space has the following values:
normal: merging contiguous blank, newline character is a blank, the container beyond the line feed
pre: white space is reserved browser. Its behavior in a manner similar to HTML <pre> tag. Beyond the container does not wrap
nowrap: merging contiguous blank, newline character is a blank; not exceed the wrap container
pre-wrap: blank character sequence, but the normal line feed.
pre-line: consolidated blank character sequence, but retains the line breaks.