CSSテキストオーバーフロー、ワードラップ、改行

この章では、次のプロパティについて学習します。

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

CSSテキストオーバーフロー

CSStext-overflowプロパティは、表示されていないオーバーフローコンテンツをユーザーに通知する方法を指定します。

クリップすることができます：

これはボックスに収まらない長いテキストです

または、省略記号(...)としてレンダリングできます。

これはボックスに収まらない長いテキストです

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

次の例は、要素の上にカーソルを置いたときにオーバーフローしたコンテンツを表示する方法を示しています。

CSSワードラッピング

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

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

この段落には非常に長い単語が含まれています。長い単語は改行され、次の行に折り返されます。

word-wrapプロパティを使用すると、単語の途中でテキストを分割することを意味する場合でも、テキストを強制的に折り返すことができます。

この段落には非常に長い単語が含まれています。長い単語は改行され、次の行に折り返されます。

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

CSSワードブレーク

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

この段落にはテキストが含まれています。この行はハイフンで改行します。

この段落にはテキストが含まれています。行は任意の文字で中断されます。

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

CSS書き込みモード

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

vertical-rl writing-modeのspan要素を持つテキスト。

次の例は、いくつかの異なる書き込みモードを示しています。

CSSテキスト効果のプロパティ

次の表に、CSSテキスト効果のプロパティを示します。