當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

041_CSS3文本效果

發布時間：2025/4/17 CSS 72 豆豆

生活随笔收集整理的這篇文章主要介紹了 041_CSS3文本效果小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. text-overflow屬性

1.1. text-overflow屬性規定當文本溢出包含元素時發生的事情。

1.2. 默認值

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>下面兩個div包含無法在框中容納的長文本。正如您所見, 文本被修剪了。</h3><p>這個div使用"text-overflow: ellipsis":</p><div style="text-overflow: ellipsis;">This is some long text that will not fit in the box</div><p>這個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屬性向文本添加一個或多個陰影。該屬性是逗號分隔的陰影列表, 每個陰影有兩個或三個長度值和一個可選的顏色值進行規定。省略的長度是0。

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

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

2.3. 默認值

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>一個文本陰影</span><p>多個文本陰影</p></body> </html>

2.5.2. 效果圖

3. word-wrap屬性

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

3.2. 默認值

3.3. 可能值

3.4. 例子

3.4.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>CSS3 自動換行</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. 效果圖

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。