本文地址：http://www.cnblogs.com/veinyin/p/7606689.html?

?

文本屬性也是必須存在的不是嗎？ 否則我們?nèi)绾巫岉撁鏉M足我們一天天增長的審美呢~

1 縮進(text-indent)

text-indent: 3em; //首行縮進3em

可以應用于所有塊級元素，不能用于行內(nèi)元素(內(nèi)聯(lián)元素)，上面的值可以根據(jù)自己需要調(diào)整

還可以為負值，實現(xiàn)懸掛縮進。但可能會導致超出瀏覽器邊界，可以設置內(nèi)邊距或外邊距防止此現(xiàn)象發(fā)生。?

2 水平對齊(text-align)

text-align: center;

可以取值 center , left , right , justify , inherit

其他都是十分易懂的，要提一下的是其中的 justify 可以使文本兩端對齊。?

3 垂直對齊(vertical-align)

vertical-align: middle;

可以取值 baseline , sub , su , top , text-top , middle , bottom , text-bottom , inherit

應用與行內(nèi)元素與表格單元。

在說明具體作用之前，先要介紹另外一個屬性 line-height ;

line-height 在我一直以來的用法都是設置行間距，當然，這是絕對沒問題的，但是并不清楚是如何實現(xiàn)的。

首先，要清楚的一件事就是 行間距 = line-height - font-size；

得到的行間距一分為二，分別放在文字上方和下方，正式成為行間距。

接下來繼續(xù)講這些可取的值都能達到什么效果：

• baseline ： 把基線與父元素基線對齊
• sub 、 super ： 基線下移、 上移，形成上下標的樣式，但大小不改變
• bottom ： 將行內(nèi)框底端與行框底端對齊
• top ： 將行內(nèi)框頂部與行框頂部對齊
• middle ： 中部對齊，不是十分嚴格的對齊
• text-top ： 將行內(nèi)框頂部與父元素內(nèi)容區(qū)頂部對齊
• text-bottom ： 將行內(nèi)框底部與父元素內(nèi)容區(qū)底部對齊

4 字間隔 ( word-spacing ) 和字母間隔 ( letter-spacing )

兩者使用方法相同

word-spacing: 2px; letter-spacing: 2em;

這些都是可以的，用法十分簡單?

5 文本轉換 ( text-transform )

text-transform: uppercase; //轉換為大寫

還可以取值：

• lowercase : 轉換為小寫
• capitalize : 每個單詞的首字母轉換為大寫?
  
  

6 文本裝飾 ( text-decoration )

• underline : 下劃線；
• overline : 上劃線；
• line-through : 貫穿線；
• blink : 閃爍，不推薦使用，不友好
• none : 去掉所有裝飾?
  
  

7 文本陰影 ( text-shadow )

text-shadow: color 右偏移 下偏移 模糊半徑 ( ， color 右偏移 下偏移 模糊半徑 ) ;

上面括號是可選的，如果去掉括號就有兩個陰影，如果想要更多陰影，重復更多次即可，逗號一定要有，吧各個陰影隔開。

哦 還有， 模糊半徑是可以不設置的，可以省去不寫?

8 空白符 (white-space)

用于處理文本中空格、換行符和 tab 字符

• normal : 把空白符合并成一個空格，這是默認的
• nowrap : 不允許換行 可以用于控制表單元格內(nèi)容不換行
• pre : 不合并空白符 ，所有的都顯示出來 不允許自動換行
• pre-wrap : 不合并空白符，正常換行
• pre-line : 合并空白符，正常換行?
  
  

9 文本方向 ( direction )

• ltr : 默認， left to right 從左到右
• rtl : right to left 從右到左
• inherit : 繼承

失望.... 看到文本方向的時候還以為是要由橫向和縱向的選擇呢~

END~~~≥ω≤

轉載于:https://www.cnblogs.com/veinyin/p/7606689.html

總結

以上是生活随笔為你收集整理的文本属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。