CSS text and css tutorials

CSS text and css tutorials
Directory [1] Text shadow [2] First line indent [3] horizontal alignment [4] vertical alignment [5] Word interval [6] letter interval [7] Text conversion [8] Text modifier [9] blank space character [10] text line feed [11] Text overflow [12] Text direction text shadow (IE8-not supported)

Text-shadow: none (default) text-shadow: [color] x axis displacement (x-offset) y axis displacement (y-offset) blur radius (blur-radius ),*

[Note] do not add too many shadows, which may cause performance problems.

[View text shadow Code]

 

First line indent

Text-indent: 0 (default) text-indent: the specific value (which can be a negative value) text-indent: x % (relative to the width of the contained block) text-indent: 2em (font size of 2 Chinese characters)

[Note] text-indent can only be used for block-level elements and can inherit

[Suspension indent]

Div {width: 200px; border: 1px solid black; text-indent:-1em; // key code padding-left: 1em; // key code}

[Sinking the first word]

<style>div{    width: 200px;    border: 1px solid black;    text-indent: 0.5em;}div:first-letter{    font-size: 30px;    float: left;}  

Horizontal Alignment

Text-align: left (left aligned) text-align: right (right aligned) text-align: center (center aligned) text-align: justify (both ends aligned) (IE browser is invalid)

[Note] text-align is only applicable to block-level elements and can be inherited.

div:nth-child(1){text-align: left;}div:nth-child(2){text-align: right;}div:nth-child(3){text-align: center;}div:nth-child(4){text-align: justify;}

Vertical Alignment

[1] Row Height
The line-height attribute refers to the distance between baselines of the row.
Line spacing = line-height-font-size

Line-height: normal; (default) line-height: 100%/1em/16px; (% relative to the font size of the element) line-height: 1; (1 indicates the zoom factor, the font size of the current element)

[Note] the Row Height applies to any element and can be inherited.

[2] vertical alignment text

Vertical-align: baseline (baseline alical align: sub (subscript) vertical-align: super (superscript) vertical-align: bottom (bottom) vertical-align: text-bottom (bottom of the text) vertical-align: top vertical-align: text-top (top of the text) vertical-align: middle (center) vertical-align :( +-n) px (npx of the element relative to the baseline) vertical-align: x % (line-height value relative to the element)

[Note] vertical-align is only used for intra-row elements and replacement elements, and cannot be inherited.

 

Word interval (word spacing)

Word-spacing: normal (normal = 0 by default) word-spacing: the specific value (can be a negative value)

[Note] words are separated by spaces. The spacing between words is = word-spacing + space size.

 

Letter interval (Character spacing)

Letter-spacing: normal (normal = 0 by default) letter-spacing: specific value (negative value)

[Note] word-spacing and letter-spacing can be used for all elements and can inherit

 

Text Conversion

Text-transform: none (default) text-transform: uppercase (all uppercase) text-transform: lowercase (all lowercase) text-transform: capitalize (uppercase)

[Note] text-transform can be used for all elements and can inherit

Text Modifier

Text-decoration: none (default, no modifier) text-decoration: overline (upper line) text-decoration: line-through (middle line or strikethrough) text-decoration: underline (underline)

[Note] text-decoration can be used for all elements, but cannot be inherited.

 

Blank Space (IE7-pre-wrap and pre-line are not supported)

Blank spaces refer to spaces, tabs, and carriage return characters. HTML merges all blank characters into one space by default.

White-space: normal; (default) white-space: pre; (retain blank characters and prevent text line breaks) white-space: nowrap; (prevent text line breaks) white-space: pre-wrap; (retain blank characters, text line breaks) white-space: pre-line; (merge blank characters, but retain line breaks)

[Note] white-space can be used for all elements, but cannot be inherited.

<div>They can stay 72-hours     within the Shandong      province after they have entered China via the Qingdao International Airport.</div>

Text line feed

Word-wrap: normal (default) word-wrap: break-word (truncation of word line breaks, long words start from the next line) word-break: normal (default) word-break: break-all (truncation of word line breaks, long words occupy the space remaining in the current line) word-break: keep-all (do not allow truncation of words [including Chinese], long words start from the next line)

Text Overflow

Text-overflow: clip (text cropping) text-overflow: ellipsis (display omitted flag)

[Common text Overflow Code]

Text-overflow: ellipsis; // display the omitted flag white-space: nowrap; // force not wrap overflow: hidden; // overflow hidden

Text direction (IE8-not supported)

direction:ltr(normal,left to right)direction:rtl(right to left)unicode-bidi:normalunicode-bidi:embedunicode-bidi:bidi-override