css文本效果總結
text-shadow
| 值 | 描述 |
|---|---|
| h-shadow | 必需监嗜。水平陰影的位置。允許負值博脑。 |
| v-shadow | 必需颅和。垂直陰影的位置元莫。允許負值呜师。 |
| blur | 可選蓄愁。模糊的距離腻要。 |
| color | 可選。陰影的顏色 |
和div的box-shadow 差不多涝登。就不多說了
word-wrap,word-break,white-space
首先貼出代碼
<div>
haha ssssssssssssssssssssssssssssssssssssssssssssssss
</div>
div{
width:100px;
background:red;
}
在沒有任何代碼的情況下
可以看到瀏覽器雄家，自動把長單詞擠到下一行，不換行。
word-wrap
div{
width:100px;
background:red;
word-wrap:break-word;
}
瀏覽器把長單詞擠到下一行趟济，長單詞換行乱投。
word-break
div{
width:100px;
background:red;
word-break:break-all;
}
瀏覽器沒有把長單詞擠到下一行，而且長單詞自動換行顷编。
white-space
用于處理元素內的空白
div{
width:100px;
height:100px;
background:red;
white-space:nowrap;
}
text-overflow
| 值 | 描述 |
|---|---|
| clip | 修建文本 |
| ellipsis | 顯示省略符號來代表被修剪的文本 |
| string | 使用給定的字符串來代表被修剪的文本戚炫。 |
ps:此屬性設置的前提是設置overflow:hidden和white-space:nowrap
div{
width:100px;
height:100px;
background:red;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
