CSS Rendering (ii) text

First, Text style

First Line indent text-indent

The first line indent is the indentation of the first line of the paragraph, which is a commonly used text formatting effect. Generally speaking, Chinese writing begins with two empty panes. [Note] This property can be negative; apply to: block-level elements (including block and Inline-block)

        <div>            <p style= "text-indent:2em" > AFC Champions League is Asia's highest level of club events </p>            <p> Equivalent to European Champions League and South America's South American Liberator Cup </p>        </div>

Word Interval word-spacing

A word interval is a word spacing that is used to set the spacing between text or words. [note] The word interval can be negative; spacing between words = word-spacing + space size; must be a space to take effect

    <div>        <div style= "width:100px;" > Purchase Quantity:</div>        <div style= "width:100px;  WORD-SPACING:27PX"> Shipping:</div>    </div>

Letter Spacing Letter-spacing

The letter interval is the spacing of characters , [note] The letter interval can be negative

<div style= "width:200px; letter-spacing:5px"> Purchase quantity:</div>

Text Conversion Text-transform

Text conversion for handling uppercase and lowercase conversions in English

Value: Uppercase (all caps) | lowercase (all lowercase) | Capitalize (capital letter) | none | Inherit

Initial value: None

<div style= "Text-transform:uppercase" >test one</div>

Text Decoration text-decoration

Text decorations are used to provide cosmetic lines for text [note] The color of the text decoration line is the same as the text color

Value: none | [Underline (underline) | | | overline (DASH) | | Line-through (DASH)] | Inherit

Initial value: None

<div style= "Text-decoration:underline" >test one</div>

White space character White-space

Whitespace characters are spaces, tabs, and carriage returns; HTML by default already matches all whitespace into a single space

White-space

Value: Normal | nowrap | Pre | Pre-wrap | Pre-line | Inherit

Initial value: Normal

Normal: Merge whitespace character, allow wrap nowrap: Merge whitespace, do not allow line wrapping

    <div style= "Width:200px;white-space:nowrap" >        they can stay 72-hours within the        Shandong      Province after they has entered China via the Qingdao international Airport.    </div>

Text Wrapping Word-wrap

The browser itself has the function of text wrapping, and the right side of the text container can be wrapped in an automatic line

For English, the browser will wrap around half-width spaces or hyphens without suddenly wrapping in the middle of a word

For Chinese, you can wrap a line after any text, but when the browser encounters a punctuation mark, it usually wraps the punctuation and the previous text as a whole.

Word-wrap

The Word-wrap property is used to implement word wrapping for long words or URL addresses

Value: Normal | Break-word

Initial value: Normal

Word-wrap:normal (The browser wraps only half-width spaces or hyphens) Word-wrap:break-word(word wrapping is truncated, long words start on the next line)

　　[note] The Word-break and Word-wrap properties are invalidated when the value of White-space is nowrap or pre

    <div style= "width:50px; Word-wrap:break-word ">        ABC        fffffffffffffffffff        jkl    </div>

When it's time to add,

Second, text overflow Text-overflow

    <class= "text">         long English        fffffffffffffffffff     </ Div >

        . Text{            width: 80px;             Background: Red;             Overflow: hidden;             white-space: nowrap;             text-overflow: ellipsis;        }

When it's time to add,

Third, text shadow Text-shadow

Similar to a box shadow, the text shadow also has an x-axis offset, a y-axis offset, a blur radius, and a shadow color of four values, but there are no shadow dimensions and inner shadows for both values

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:     blur distance (this value cannot be negative, optional) color:    

<class= "text"> Test text </div>

        . Text{            width: 100px;             Height: 100px;             text-shadow: 2px 2px 3px green;        }

CSS Rendering (ii) text