Css3 Practices (4): Text Effects

I have been busy with my work. I am a little late in this blog post. I am sorry!

1 text effects

Css3 adds a lot of special effects to the text, http://www.w3schools.com/css3/css3_text_effects.asp

Here I will introduce text-shadow, word-wrap, word-break, and text-overflow.

1.1 Text-shadow

Text shadow is currently not supported by IE, and is supported by other browsers.

Syntax: Text-Shadow:H-shadow V-shadow blur color;

This is a bit similar to box-Shadow.

Note:

Value	Description
H-shadow	Required. specifies the position of the shadow in the horizontal direction. It can be positive or negative.
V-shadow	Required. specifies the position of the shadow in the vertical direction. It can be positive or negative.
Blur	Optional. Fuzzy distance
Color	Optional. shadow color look at CSS color values for a complete list of possible color values

Instance:

Text-Shadow: 5px 5px 5px # 0066ff; color: #660066;
 

Text shadow

1.2 word-wrap

Enable long English words to be truncated and displayed in two rows. All browsers support this problem because each Chinese character is considered a word.

Syntax: Word-wrap: normal | break-word;

Value	Description
Normal	Display words normally (long English words cannot be truncated), default value
Break-word	Force truncation of long words (also known as force line feed)

Instance:

<Div class = "wrap1"> the word-wrap propertyallowslong words to be able to be broken and wrap onto the next line </div> <Div class = "wrap2"> the word -Wrap propertyallowslong words to be able to be broken and wrap onto the next line </div>
 

 
Div. wrap1 {width: 100px; Word-wrap: normal; Border: 1px gray solid; float: Left; margin-Right: 80px;} Div. wrap2 {width: 100px; Word-wrap: Break-word; Border: 1px maroon solid; float: Left ;}
 

1.3 word-break

It is specially used for non-CJK (CJK: CJK text) line feed rules. Firefox and opera do not support it.

Syntax: Word-break: normal | break-All | hyphenate;

Note:

Value	Description
Normal	Line feed according to normal rules
Break-all	No matter what character will force a line break (in non-Chinese-Japanese text)
Hyphenate	The word will wrap at a suitable time

Instance:

P. test1 {width: 11em; Border: 1px solid #000000; Word-break: hyphenate;} p. test2 {width: 11em; Border: 1px solid #000000; Word-break: Break-all ;}
 

 
<P class = "test1"> This paragraph contains some text. this line will-break-at-hyphenates. </P> <P class = "Test2"> This paragraph contains some text: the lines will break at any character. </P>
 

This paragraph contains some text. This line will-break-at-hyphenates.

This paragraph contains some text: the lines will break at any character.

1.4 text-Overflow

When the text length in the container exceeds the width of the container, specify the text display mode (cut off ,... And display characters ). I believe this is often used in the display of news lists

Syntax: Text-overflow: Clip | ellipsis |String;

Value	Description
Clip	Cut text
Ellipsis	The ellipsis ("...") is used to replace the text to be cut. It is not supported in Firefox.
String	A string is used to replace the text to be cut. Currently, the browser does not support this function.

Instance:

  the text-overflow Property specifies what shocould happen when text overflows the containing element   the text-overflow Property specifies what shoshould happen when text overflows the containing element  

The text-overflow Property specifies what shoshould happen when text overflows the containing element
The text-overflow Property specifies what shoshould happen when text overflows the containing element

1.5 text-justify

This is a special text effect of IE, which is used to align text in objects.

Reference URL: http://msdn.microsoft.com/en-us/library/ms531172 (V = vs.85). aspx

Syntax: Text-justify: auto | inter-word | inter-ideograph | inter-cluster | distribute | kashida | newspaper;

Note: The prerequisite for using this CSS is text-align: justify;
Note:

Auto	Default value. Allow the browser to determine the alignment of the applicationAlgorithm.
Distribute	Processing interval, which is very similar to processing newspaper values. Alignment in this form is optimized for documents in Asian languages (such as Thai.
Inter-cluster	Align text lines that do not contain spacing. This form of alignment is optimized for documentation in the Asian language.
Inter-ideograph	Align the text lines to increase or decrease the spacing and spacing of interactive text.
Inter-word	Align text by adding spaces between words. The interval adjustment of this value is the fastest way to make all text lines of the same length. Its alignment does not affect the last line of the paragraph.
Kashida	The text line is aligned by extending characters at the selected point. This form of alignment applies to Arabic scripting languages.
Newspaper	Increase or decrease the letter spacing and word spacing. It is the most complex alignment for Latin letters.

Example: You can refer to the following page for attention (because a Chinese character is equivalent to an English word ).

At this point, the text attribute added in css3 has been completed. With the version earlier than CSS, a lot of text CSS can be used.

2. Content

Content is actually the content in css2. I personally think it is a good style. It is used to insert the specified text to the object using the CSS pseudo selector (: BEFORE AND: after.

Syntax: Content: ""

Note:

Value	Description	Example
None	Content is not specified	Try it»
Normal	The text in the object is normal, that is, no text is added.	Try it»
Counter	Sets the content as a counter	Try it»
ATTR(Attribute)	Sets the content as one of the selector's attribute	Try it»
String	Set additional content as a string	Try it»
Open-quote	Set content to open quotation marks	Try it»
Close-quote	Set content to closed quotation marks	Try it»
No-open-quote	Move the specified open quotation mark. If it exists	Try it»
No-close-quote	The specified ending number before moving, if it exists	Try it»
URL (URL)	Use a file to set its content	Try it»
Inherit	Inherit the content attribute of the parent Element

Example: you can click "Try it" to see the w3school instance.

3. Font-face

@ Font-FACE: you do not need to worry about the absence of break in the client library. You can specify the path of the corresponding font for your browser. Most browsers support the @ font-face rule, however, ie only supports. EOT font supported by other browsers. TTF and. OTF font.

For example:

@ Font-face {font-family: myfirstfont; SRC: URL ('sansation _ light. ttf'), URL ('sansation _ light. EOT ');/* ie */}
 

Syntax description:

 

Font Descriptor	Values	Description
Font-family	Name	Required. Name the referenced font
SRC	URL	Required. specifies the path of the font.
Font-stretch	Normal Condensed Ultra-condensed Extra-condensed Semi-condensed Expanded Semi-expanded Extra-expanded Ultra-expanded	Optional.
Font-style	Normal Italic Oblique	Optional.
Font-weight	Normal Bold 100 200 300 400 500 600 700 800 900	Optional.
Unicode-Range	Unicode-Range	Optional. specifies the encoding range supported by the font. The default value is "U + 0-10ffff"