日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

041_CSS3文本效果

發(fā)布時(shí)間：2025/4/17 89 豆豆
生活随笔 收集整理的這篇文章主要介紹了 041_CSS3文本效果 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. text-overflow屬性

1.1. text-overflow屬性規(guī)定當(dāng)文本溢出包含元素時(shí)發(fā)生的事情。

1.2. 默認(rèn)值

1.3. 可能值

1.4. 例子

1.4.1. 代碼

<!DOCTYPE html> <html><head><title>文本溢出處理</title><meta charset="utf-8" /><style type="text/css">div {border: 1px solid #000000;width: 12em;white-space: nowrap; overflow: hidden; }</style></head><body><h3>下面兩個(gè)div包含無法在框中容納的長(zhǎng)文本。正如您所見, 文本被修剪了。</h3><p>這個(gè)div使用"text-overflow: ellipsis":</p><div style="text-overflow: ellipsis;">This is some long text that will not fit in the box</div><p>這個(gè)div使用"text-overflow: clip":</p><div style="text-overflow: clip;">This is some long text that will not fit in the box</div></body> </html>

1.4.2. 效果圖

2.?text-shadow屬性

2.1. text-shadow屬性向文本添加一個(gè)或多個(gè)陰影。該屬性是逗號(hào)分隔的陰影列表, 每個(gè)陰影有兩個(gè)或三個(gè)長(zhǎng)度值和一個(gè)可選的顏色值進(jìn)行規(guī)定。省略的長(zhǎng)度是0。

2.2. 規(guī)定水平陰影的位置、垂直陰影的位置、模糊距離, 以及陰影的顏色:

text-shadow: h-shadow v-shadow blur color;

2.3. 默認(rèn)值

2.4. 可能值

2.5. 例子

2.5.1. 代碼

<!DOCTYPE html> <html><head><title>CSS3文本陰影</title><meta charset="utf-8" /><style type="text/css">span {font-size: 32px;text-shadow: 5px 5px 5px #FF0000;}p {font-size: 32px;text-shadow: 5px 5px 5px #FF0000, 5px 5px 5px #FFFF00;}</style></head><body><span>一個(gè)文本陰影</span><p>多個(gè)文本陰影</p></body> </html>

2.5.2. 效果圖

3. word-wrap屬性

3.1. word-wrap屬性允許長(zhǎng)單詞或URL地址換行到下一行。

3.2. 默認(rèn)值

3.3. 可能值

3.4. 例子

3.4.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>CSS3 自動(dòng)換行</title><style type="text/css">p {width: 11em; border: 1px solid #000000;}</style></head><body><p style="word-wrap: normal;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword.</p><p style="word-wrap: break-word;">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p></body> </html>

3.4.2. 效果圖

?

總結(jié)

以上是生活随笔為你收集整理的041_CSS3文本效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。