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內外陰影 )
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;
}