Css rendering (2) text, css rendering text

Source: Internet
Author: User

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;        }

 

 

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.