站長資訊網(wǎng)css文本設(shè)置主要的屬性有：font-famil、font-size、color、text-align、text-decoration、border、text-shadow、Word-warp、Word-break、direction等等。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css文本各種屬性集合
1、字體屬性
-
font-family：‘微軟雅黑’ 指定字體Css屬性設(shè)置樣式
-
font-size：設(shè)置字體大小。
-
font-weight：設(shè)置文本的粗細(xì)
-
font-style:設(shè)置字體傾斜，可能的屬性有normal、italic、oblique;
-
line-height:設(shè)置字體的行間距;
-
color 字體顏色
2、文本屬性
-
text-align:控制文本的對齊方式
-
text-indent :控制文本首行的縮進，px或%都可；
-
white-space:文檔中的空白處
屬性值：
-
noraml: 默認(rèn)忽略多個空格,只輸出一個空格 .
-
nowrap: 強制不換行
-
pre:空格/縮進/換行 會給保留
-
pre-line:合并空表(多個空格只會輸出一個空格)
-
pre-warp:保留空白/縮進,正常換行 ;
-
-
letter-spacing:控制字母之間的距離；
-
text-overflow:當(dāng)文本溢出包含元素時發(fā)生的事情；
-
屬性值：
-
clip 修剪文本。
-
ellipsis 顯示省略符號來代表被修剪的文本。
-
string 使用給定的字符串來代表被修剪的文本。
-
-
word-spacing :控制單詞間空格的距離，以空格來區(qū)分單詞，中英都OK；
3、下劃線屬性
text-decoration :控制文本是否有下劃線，可能值有
-
none 沒有下劃線
-
overline 定義文本上的一條線。
-
line-through 定義穿過文本下的一條線。
-
underline 定義文本下的一條線。
4、轉(zhuǎn)換大小寫
text-transform:
屬性值：
-
none(默認(rèn)) 無轉(zhuǎn)換;
-
capitalize:每個單詞第一個字母為大寫;
-
upercase :轉(zhuǎn)換成大寫;
-
lowercase:轉(zhuǎn)換成小寫;
【推薦教程：CSS視頻教程】
5、邊框?qū)傩?/strong>
| 屬性 | 描述 |
|---|---|
| border | 簡寫屬性，用于把針對四個邊的屬性設(shè)置在一個聲明。 |
| border-style | 用于設(shè)置元素所有邊框的樣式，或者單獨地為各邊設(shè)置邊框樣式。 |
| border-width | 簡寫屬性，用于為元素的所有邊框設(shè)置寬度，或者單獨地為各邊邊框設(shè)置寬度。 |
| border-color | 簡寫屬性，設(shè)置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設(shè)置顏色。 |
| border-bottom | 簡寫屬性，用于把下邊框的所有屬性設(shè)置到一個聲明中。 |
| border-bottom-color | 設(shè)置元素的下邊框的顏色。 |
| border-bottom-style | 設(shè)置元素的下邊框的樣式。 |
| border-bottom-width | 設(shè)置元素的下邊框的寬度。 |
| border-left | 簡寫屬性，用于把左邊框的所有屬性設(shè)置到一個聲明中。 |
| border-left-color | 設(shè)置元素的左邊框的顏色。 |
| border-left-style | 設(shè)置元素的左邊框的樣式。 |
| border-left-width | 設(shè)置元素的左邊框的寬度。 |
| border-right | 簡寫屬性，用于把右邊框的所有屬性設(shè)置到一個聲明中。 |
| border-right-color | 設(shè)置元素的右邊框的顏色。 |
| border-right-style | 設(shè)置元素的右邊框的樣式。 |
| border-right-width | 設(shè)置元素的右邊框的寬度。 |
| border-top | 簡寫屬性，用于把上邊框的所有屬性設(shè)置到一個聲明中。 |
| border-top-color | 設(shè)置元素的上邊框的顏色。 |
| border-top-style | 設(shè)置元素的上邊框的樣式。 |
| border-top-width | 設(shè)置元素的上邊框的寬度。 |
6、盒子陰影
box-shadow:盒子陰影;
可以有五個值 (h-shadow水平陰影位置,v-shadow垂直陰影位置,blur模糊距離,spread陰影尺寸, color， inset/outset內(nèi)外陰影 )
eg:
box-shadow: 10px 5px 10px red inset;
7、文本超出換行
-
Word-warp:允許長單詞轉(zhuǎn)換到下一行
-
Word-break:允許在單詞內(nèi)轉(zhuǎn)行(自動換行)
8、文字?jǐn)[放形式
direction: 文字?jǐn)[放方向
屬性值：
-
ltl:從左往右
-
rtl:從右往左
9、文本超出換行
-
Word-warp:允許長單詞轉(zhuǎn)換到下一行
-
Word-break:允許在單詞內(nèi)轉(zhuǎn)行(自動換行)
10、文字陰影
-
text-shadow:參考盒子陰影
11、文本單行超出顯示省略號
{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
12、多行文本超出用省略號代替限制行數(shù)
{ overflow:hidden; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 3; /*限制在一個塊元素顯示的文本的行數(shù)*/ -webkit-box-orient: vertical; text-overflow:ellipsis; }
