文本字體屬性彙總

css文本各類屬性集合

1.   字體屬性

         font-family：‘微軟雅黑’  指定字體Css屬性設置樣式

         font-size: 12px/em/rem

         font-weight:normal;

         font-style:設置字體傾斜，可能的屬性有normal、italic、oblique;

         line-height:設置字體的行間距;

         color:red 字體顏色

2.    文本屬性**

         text-align:控制文本的對齊方式

         text-indent :控制文本首行的縮進，px或%均可；

         white-space:文檔中的空白處

         屬性值:noraml: 默認忽略多個空格,只輸出一個空格 .

                    nowrap: 強制不換行

                    pre:空格/縮進/換行 會給保留

                    pre-line:合併空表(多個空格只會輸出一個空格)

                    pre-warp:保留空白/縮進,正常換行 ;

letter-spacing:控制字母之間的距離；

				text-overflow:當文本溢出包含元素時發生的事情；

				屬性值: clip  修剪文本。

                     ellipsis  顯示省略符號來表明被修剪的文本。

                     string  使用給定的字符串來表明被修剪的文本。

                     word-spacing :控制單詞間空格的距離，以空格來區分單詞，中英都OK；

3.   下劃線屬性

text-decoration :控制文本是否有下劃線，可能值有

			none  沒有下劃線

			overline  定義文本上的一條線。

			line-through  定義穿過文本下的一條線。

			underline  定義文本下的一條線。

 4.    轉換大小寫:

text-transform:

		  屬性值: none(默認) 無轉換;

		  capitalize:每一個單詞第一個字母爲大寫;

		  upercase :轉換成大寫;

		  lowercase:轉換成小寫;

5. 邊框屬性 border-radius :60px 30px 40px 50px /左上 右上 右下 右左 /50%爲圓

6. 盒子陰影
     box-shadow:盒子陰影;
     //能夠有五個值  (h-shadow水平陰影位置,v-shadow垂直陰影位置,blur模糊距離,spread陰影尺寸, color，                                      inset/outset內外陰影 ) 
     box-shadow: 10px 5px 10px red inset;

7. 文本超出換行 Word-warp:容許長單詞轉換到下一行 Word-break:容許在單詞內轉行(自動換行)

8. 文字擺放形式 direction: 文字擺放方向 屬性值 ltl:從左往右 rtl:從右往左

9. 文本超出換行 Word-warp:容許長單詞轉換到下一行 Word-break:容許在單詞內轉行(自動換行)

10. 文字陰影: text-shadow:參考盒子陰影

11. 文本單行超出顯示省略號 { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }

12. 多行文本超出用省略號代替限制行數
    { overflow:hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; /限制在一個塊元素顯示的文本的行數/ -webkit-box-orient: vertical; text-overflow:ellipsis;

    }