CSS3 テキスト効果

CSS3 には、いくつかの新しいテキスト機能が含まれています。この章では、次のテキストプロパティについて学びます：

text-shadow
box-shadow
text-overflow
word-wrap
word-break

---

CSS3 テキストシャドウCSS3 では、text-shadow プロパティがテキストシャドウに適しています。

水平方向の影、垂直方向の影、ぼかし距離、および影の色を指定します:

例タイトルに影を追加するには:

      
  
文本阴影效果!
  

プログラムを実行して試してください

---

CSS3ボックス - シャドウプロパティcss3のCSS3ボックスシャドウプロパティは、ボックスシャドウインスタンス

rreee

runプログラムを試してみるinthadow blur effectを追加します

      
  
盒子阴影
  

プログラムを実行して試してください

---

CSS3 Text Overflowプロパティを確認してください

CSS3 テキスト オーバーフロー プロパティは、オーバーフロー コンテンツをユーザーに表示する方法を指定します

      
  
这是一个带有模糊效果的阴影
  

プログラムを実行して試してみましょう

---

CSS3 の行折り返し

単語が長すぎて領域内に収まらない場合は、領域外に拡張されます:

CSS3 の Word Breaking プロパティを使用すると、単語を途中で分割することになる場合でも、テキストを強制的に折り返すことができます:

      
  
以下 div 容器内的文本无法完全显示，可以看到它被裁剪了。
 
div 使用 "text-overflow:ellipsis":
 
This is some long text that will not fit in the box
 
div 使用 "text-overflow:clip":
 
This is some long text that will not fit in the box
 
div 使用自定义字符串 "text-overflow: >>"(只在 Firefox 浏览器下有效):
 
This is some long text that will not fit in the box
  

プログラムを実行して試してください

---

CSS3 Word Breaking

CSS3 Word Breaking プロパティは改行ルールを指定します:

CSS コードは次のとおりです:

      
  
 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
  

プログラムを実行して試してください