CSS text attributes define the appearance of the text, there is no doubt, followed by css layout can change the text of the following attributes, for example to achieve character spacing letter-spacing text-indent: 2em; completed the first line indent 2 characters word- change the spacing of text spacing, direction change the text read from left to right, between the white-space characters blank text-transform process to achieve changes in the case of text text-align text layout alignment, as we often see the product tour ellipsis "..." how to implement and how to align text textures, all in the code details below introduced one by one.
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>css常用样式对文本的处理演练</title> 7 <style type="text/css"> 8 div#box{ 9 letter-spacing:2px ; / * character pitch * / 10 text-indent : 2em ; / * first line indent 2 characters * / . 11 width : 300px by ; / * width of the container * / 12 is height : 200px ; / * container height * / 13 is Color : # 000 ; / * text color * / 14 background-color : RGB (255,0,0) ; / * container background color * / 15 } 16 P { . 17 Word-spacing : 5px ; / * character pitch * / 18 is direction : RTL ; / * Text Orientation * * // default text direction from left to right LTR, right to left * / . 19 White-Space : Normal ; / * Processing whitespace * / 20 / * by using this property can affect the way between the whitespace between the browser and the word processing text lines. To some extent, the default XHTML processing has been completed whitespace handling: 21 it will comply with all blank and a space. Therefore, given the following mark, which is displayed in the Web browser will display a space between each word, while ignoring wrapping elements: * / 22 } 23 / * text decoration * / 24 p.text { 25 text-Decoration : underline ; 26 is text-Decoration : overline ; 27 text-Decoration : none ; 28 text-Transform : UPPERCASE ; / * all uppercase * / 29 text-Transform : lowercase ; / * all lower case * / 30 text-Transform : capitalize ; / * initials * / 31 } 32 / * text alignment * / 33 is div{ 34 is text-align = left : left ; / * Text Left * / 35 text-align = left : right ; / * Text Left * / 36 text-align = left : Center ; / * Center text * / 37 [ text-align = left : The justify ; / * two end alignment * / 38 } 39 / * problem: we usually see like this http://www.mi.com/seckill merchandise presentation ellipsis ... how? * / 40 div Box # { 41 is width : 400px; 42 is height : 50px ; 43 is White-Space : nowrap ; / * text does not wrap * / 44 is overflow : hidden ; / * Text piercing hide * / 45 text-overflow : ellipsis ; / * ellipsis * / 46 is Line-height : 50px ; / * text vertical alignment * / 47 } 48 / * problem: when inserting images, how to align text and images around the top * / 49 IMG { 50 width : 200px ; 51 is a float : left ; 52 is Vertical-align = left : bottom ; / * text vertically Middle Top bottom * / 53 is } 54 is div> P { 55 a float : left ; / * text textures alignment * / 56 is } 57 is </ style > 58 </ head > 59 < body > 60 < div ID = "Box" >Erotic words: 1. I am not exaggerating rhetoric or insincere. I think the world has treated me great. In the past did I think so. Until I met you in the face in the crowd. I met a light, and let my life no regrets, do not fear. 2. I am a stubborn man, reluctant to move from principles and a half points, 61 then may you come, my principles became you. 3. like a person can not hide, even if the mouth did not say, will come out from the eyes. I love you, seriously and counseling, single-mindedness. </ Div > 62 is < P class = "text" > the I'm Person A stubborn love. Never the I want to Move Half of The Principles, But After you Come, My Principles Become you. </ P > 63 is < div class = " PIC " > 64 < IMG the src =" https://i-beta.cnblogs.com/assets/adminlogo.gif " Alt =" " > I am a stubborn man, reluctant to move from principles and a half minutes, after which you can come, my principles became you. 65 </div> 66 </body> 67 </html>