CSS3 テキスト

CSS3 テキスト

CSS3 には、いくつかの新しいテキスト機能が含まれています。

この章では、次のテキストプロパティについて説明します:

• text-overflow
• word-wrap
• word-break

ブラウザ・サポート

表中の数字は、完全にプロパティをサポートした最初のブラウザのバージョンです。

数字の後に続く -o- は、接頭辞付きで動作した最初のバージョンです。 

CSS3 テキスト・オーバフロー

CSS3 text-overflow プロパティは、表示されないオーバフローしたコンテンツをどのように表すべきかを指定します。

切り取ることができます：

It can be clipped:

This is some long text that will not fit in the box

または、省略記号（...）としてレンダリングすることができます：

This is some long text that will not fit in the box

CSS コードは次の通りです：

次の例は、要素の上にマウスを移動したとき、オーバフローしたコンテンツを表示する方法を示しています：

CSS3 単語の折返し

CSS3 word-wrap プロパティは、長い単語を分割して、次の行に折り返すことができるようにします。

エリア内に収まりきれないほど単語が長すぎる場合、外側にはみ出してしまいます：

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

word-wrap プロパティは、強制的にテキストの折り返しを可能にします - これは、単語の中央であっても分割することを意味します：

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

CSS コードは次の通り：

CSS3 単語内での改行

CSS3 word-break プロパティは、改行規則を指定します。

This paragraph contains some text. This line will-break-at-hyphens.

This paragraph contains some text. The lines will break at any character.

CSS コードは次の通り：

練習問題で確認テスト！

Exercise 1 ❯  Exercise 2 ❯  Exercise 3 ❯

CSS3 テキストプロパティ

次の表は、新しい CSS3 テキストプロパティのリストです：