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