CSS文本屬性可定義文本的外觀，這是毫無疑問的，其次css可以通過以下屬性改變文字的排版，比方說letter-spacing實現字元間距text-indent: 2em;完成首行縮進2字元word-spacing改變了文字的間距，direction改變文本從左至右的閱讀順序，white-space處... ...
CSS文本屬性可定義文本的外觀，這是毫無疑問的，其次css可以通過以下屬性改變文字的排版，比方說letter-spacing實現字元間距text-indent: 2em;完成首行縮進2字元word-spacing改變了文字的間距，direction改變文本從左至右的閱讀順序，white-space處理字元間空白text-transform實現文字大小寫text-align改變文字排版對齊，至於我們常看到的產品介紹中的省略號“...”如何實現以及文字如何貼圖對齊，盡在下麵代碼詳情中一一介紹。
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;/*字元間距*/ 10 text-indent: 2em;/*首行縮進2字元*/ 11 width: 300px;/*容器寬度*/ 12 height: 200px;/*容器高度*/ 13 color: #000;/*文本顏色*/ 14 background-color:rgb(255,0,0);/*容器背景色*/ 15 } 16 p{ 17 word-spacing: 5px;/*文字間距*/ 18 direction: rtl;/*文本方向*//*預設文本方向從左至右ltr，left to right*/ 19 white-space:normal;/*處理空白符*/ 20 /*通過使用該屬性，可以影響瀏覽器處理字之間和文本行之間的空白符的方式。從某種程度上講，預設的 XHTML 處理已經完成了空白符處理： 21 它會把所有空白符合併為一個空格。所以給定以下標記，它在 Web 瀏覽器中顯示時，各個字之間只會顯示一個空格，同時忽略元素中的換行：*/ 22 } 23 /*文本修飾*/ 24 p.text{ 25 text-decoration: underline; 26 text-decoration: overline; 27 text-decoration: none; 28 text-transform: uppercase;/*全部大寫*/ 29 text-transform: lowercase;/*全部小寫*/ 30 text-transform: capitalize;/*首字母大寫*/ 31 } 32 /*文本對齊方式*/ 33 div{ 34 text-align: left; /*文本居左*/ 35 text-align: right; /*文本居左*/ 36 text-align: center; /*文本居中*/ 37 text-align: justify;/*兩端對齊*/ 38 } 39 /* 問題：我們通常看到的類似這樣的http://www.mi.com/seckill 商品介紹中的省略號...如何實現？ */ 40 div#box{ 41 width: 400px; 42 height: 50px; 43 white-space: nowrap;/*文本不換行*/ 44 overflow: hidden;/*文本穿出隱藏*/ 45 text-overflow: ellipsis;/*省略號*/ 46 line-height: 50px;/*文本垂直對齊*/ 47 } 48 /* 問題：當插入圖片，如何讓文本與圖片頂對齊圍繞 */ 49 img{ 50 width: 200px; 51 float: left; 52 vertical-align: bottom;/*文本垂直 middle top bottom */ 53 } 54 div>p{ 55 float: left;/*文本貼圖對齊*/ 56 } 57 </style> 58 </head> 59 <body> 60 <div id="box">撩人情話：1.我並非言辭誇張或虛情假意。我覺得，這個世界已經待我極好。從前我也不曾這麼認為。直到，我在芸芸眾生之中遇見你。遇見一道光，讓我此生再無遺憾，再不畏懼。2.我是個固執的人，從不願挪動原則半分， 61 可你來了之後，我的原則就成了你。3.喜歡一個人是藏不住的，即使嘴巴不說，也會從眼睛里跑出來。我喜歡你，認真且慫，從一而終。</div> 62 <p class="text">I'm a stubborn person. I never want to move half of the principles, but after you come, my principles become you.</p> 63 <div class="pic"> 64 <img src="https://i-beta.cnblogs.com/assets/adminlogo.gif" alt="">我是個固執的人，從不願挪動原則半分，可你來了之後，我的原則就成了你。 65 </div> 66 </body> 67 </html>
