CSS3 テキストエフェクト

CSS3 には、テキストコンテンツの表示を細かく制御するための新しいプロパティがいくつか追加されました。これにより、オーバーフローしたテキストの処理や、改行ルールのカスタマイズが容易になります。

1. CSS3 テキストエフェクト

CSS3 では、以下のテキスト関連プロパティが導入されました。

• text-overflow
• word-wrap
• word-break
• writing-mode

2. CSS3 text-overflow プロパティ

text-overflow プロパティは、未表示の溢れたコンテンツ（オーバーフローしたテキスト）をユーザーにどのように通知するかを指定します。

指定できる主な値は以下の通りです。

• clip: デフォルト値。溢れたテキストを単に切り取ります。
• ellipsis: 溢れたテキストを三点リーダー（...）で表示します。

2.1 text-overflow の使用例

text-overflow を機能させるには、white-space: nowrap と overflow: hidden を併用する必要があります。

/* clip の例 */
.test1 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: clip; 
}

/* ellipsis の例 */
.test2 {
  white-space: nowrap; 
  width: 200px; 
  border: 1px solid #000000;
  overflow: hidden;
  text-overflow: ellipsis; 
}

3. CSS3 word-wrap プロパティ

word-wrap プロパティ（現在の仕様では overflow-wrap とも呼ばれます）を使用すると、非常に長い単語を強制的に改行させ、コンテナからはみ出すのを防ぐことができます。

3.1 word-wrap の使用例

非常に長い英単語などがボックスの幅を超えてしまう場合に有効です。

p {
  width: 11em; 
  border: 1px solid #000000;
  /* 長い単語の途中で強制的に改行する */
  word-wrap: break-word;
}

4. CSS3 word-break プロパティ

word-break プロパティは、テキストの改行ルールを指定します。

主な値：

• keep-all: 中国語、韓国語、日本語（CJK）において、単語の途中での改行を許可しません。
• break-all: どの文字の間でも改行を許可します（英単語などの非 CJK テキストも含む）。

4.1 word-break の使用例

p.test1 {
  width: 140px; 
  border: 1px solid #000000;
  /* 単語の途中でも改行を許可 */
  word-break: break-all;
}

p.test2 {
  width: 140px; 
  border: 1px solid #000000;
  /* CJKテキストにおいて単語の途中での改行を禁止 */
  word-break: keep-all;
}

5. CSS3 writing-mode プロパティ

writing-mode プロパティは、テキストの行の配置方向を水平または垂直にするかを指定します。

5.1 writing-mode の使用例

/* 垂直方向の記述（右から左へ行が進む） */
p.test1 {
  writing-mode: vertical-rl; 
}

/* 通常の水平方向の記述 */
p.test2 {
  writing-mode: horizontal-tb; 
}

6. テキストエフェクトプロパティ一覧

これらのプロパティを適切に組み合わせることで、多様な言語や画面サイズに対応した、堅牢で美しい Web タイポグラフィを実現することが可能です。特に多言語対応のプロジェクトでは、word-break や writing-mode の挙動を深く理解しておくことが重要です。