css文字設定主要有哪幾項屬性

css文字設定主要的屬性有：font-famil、font-size、color、text-align、text-decoration、border、text-shadow、Word-warp、Word-break、direction等等。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

css文字各種屬性集合

#1、字型屬性

• font-family：『微軟雅黑'  指定字體Css屬性設定樣式

• font-size：設定字體大小。

• font-weight：設定文字的粗細

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

• line-height:設定字型的行間距;

#color 字型顏色

## 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:轉換成小寫;

【推薦教學：

CSS影片教學

】

#5、邊框屬性描述簡寫屬性，用來把針對四個邊的屬性設定在一個宣告。 用來設定元素所有邊框的樣式，或是單獨設定邊框樣式。 簡單寫屬性，用於為元素的所有邊框設定寬度，或單獨地為各邊邊框設定寬度。 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。 簡寫屬性，用來把下邊框的所有屬性設定到一個宣告中。 設定元素的下邊框的顏色。 設定元素的下邊框的樣式。 設定元素的下邊框的寬度。 簡寫屬性，用來把左邊框的所有屬性設定到一個宣告中。 設定元素的左邊框的顏色。 設定元素的左邊框的樣式。 設定元素的左邊框的寬度。 簡寫屬性，用來把右邊框的所有屬性設定到一個宣告中。 設定元素的右邊框的顏色。 設定元素的右邊框的樣式。 設定元素的右邊框的寬度。 簡寫屬性，用來把上邊框的所有屬性設定到一個宣告中。 #設定元素的上邊框的顏色。 設定元素的上邊框的樣式。 設定元素的上邊框的寬度。

	屬性
	border
	border-style
	border-width
	border-color
	border-bottom
	border-bottom-color
	border-bottom-style
	border-bottom-width
	border-left
	border-left-color
	border-left-style
	border-left-width
	border-right
	border-right-color
	border-right-style
	border-right-width
	border-top
	border-top-color
	border-top-style
	border-top-width

######

6、盒子陰影

box-shadow:盒子陰影;

可以有五個值  ( h-shadow水平陰影位置,v-shadow垂直陰影位置,blur模糊距離,spread陰影尺寸, color， inset/outset內外陰影) 

eg:

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;
}

更多程式相關知識，請造訪：程式設計影片！ ！

以上是css文字設定主要有哪幾項屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！