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>
<!--后續-->
display:block; /*行內物件需加*/
word-break:keep-all; /*不換行*/
white-space:nowrap; /*不換行*/
overflow:hidden; /*內容超出寬度時隱藏超出部分的內容*/
text-overflow:ellipsis; /*溢位時顯示省略標記...；需與overflow:hidden;一起使用*/
對于表格，定義有點不一樣：
table{ width:30em; table-layout:fixed; /*只有定義了表格的布局演算法為fixed，下面td的定義才能起作用*/ }
td{ width:100%; word-break:keep-all; /*不換行*/ }
white-space:nowrap; /*不換行*/ overflow:hidden; /*內容超出寬度時隱藏超出部分的內容*/ text-overflow:ellipsis; /*溢位時顯示省略標記...；需與overflow:hidden;一起使用*/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/73734.html
標籤：Html/Css