css文本設置主要的屬性有哪些

這篇文章將為大家詳細講解有關css文本設置主要的屬性有哪些，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

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

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

5、邊框屬性

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文本設置主要的屬性有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。