CSS3のテキスト
CSS3は、いくつかの新しいテキスト機能が含まれています。
この章では、次のテキストプロパティについて説明します：
-
text-overflow -
word-wrap -
word-break
ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
-O-が続く数字は接頭辞で働いていた最初のバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| text-overflow | 4.0 | 6.0 | 7.0 | 3.1 | 11.0 9.0 -o- |
| word-wrap | 23.0 | 5.5 | 3.5 | 6.1 | 12.1 |
| word-break | 4.0 | 5.5 | 15.0 | 3.1 | 15.0 |
CSS3のテキストのオーバーフロー
CSS3のtext-overflowプロパティは、ユーザーに通知する方法をオーバーフローした内容が表示されないことを指定します。
これは、クリップすることができます。
これは、ボックス内に収まらないであろう、いくつかの長いテキストです
またはそれは省略記号（...）としてレンダリングすることができます。
これは、ボックス内に収まらないであろう、いくつかの長いテキストです
CSSコードは次のとおりです。
例
p.test1 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
text-overflow: ellipsis;
} »それを自分で試してみてください 次の例では、要素の上にマウスを移動するときにオーバーフローしたコンテンツを表示する方法を示します。
CSS3ワードラッピング
CSS3のword-wrapプロパティは、長い単語が壊れて次の行に折り返すことができるようにすることができます。
ワード領域内に収まるように長すぎる場合、それは外側展開します。
この段落は、非常に長い単語が含まれています： thisisaveryveryveryveryveryverylongword 。 長い単語が破損し、次の行に折り返されます。
ワードラッププロパティでは、ラップするテキストを強制することができます - それは単語の途中でそれを分割することになっても：
この段落は、非常に長い単語が含まれています： thisisaveryveryveryveryveryverylongword 。 長い単語が破損し、次の行に折り返されます。
CSSコードは次のとおりです。
CSS3ワード速報
CSS3 word-breakプロパティは、行分割規則を指定します。
この段落は、いくつかのテキストが含まれています。 この行は、破損します-で-ハイフン。
この段落は、いくつかのテキストが含まれています。 行は任意の文字で解除されます。
CSSコードは次のとおりです。
練習で自分自身をテスト！
CSS3のテキストプロパティ
次の表は、新しいCSS3のテキストプロパティを示しています。
| プロパティ | 説明 |
|---|---|
| text-align-last | テキストの最後の行を揃える方法を指定します |
| text-emphasis | 1宣言でテキストエンファシススタイルおよびテキストの強調色を設定するための速記 |
| text-justify | テキストが整列し、間隔をあけする方法を正当化指定 |
| text-overflow | ユーザーに通知する必要があります表示されませんどのようにあふれた内容を指定します |
| word-break | 非CJKスクリプトの行分割規則を指定します。 |
| word-wrap | 長い単語が破壊されることができるよう、次の行にラップすることができます |