CSS テキスト効果

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

ルールと書き方

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

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

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

CSStext-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; }

自分で試してみる»

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

例

div.test:hover { overflow: visible; }

自分で試してみる»

CSSワードラッピング

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

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

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

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

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

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

例

長い単語を分割して次の行に折り返すことができるようにします。

p { word-wrap: break-word; }

自分で試してみる»

CSSワードブレーク

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

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

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

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

例

p.test1 { word-break: keep-all; } p.test2 { word-break: break-all; }

自分で試してみる»

CSS書き込みモード

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

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

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

例

p.test1 { writing-mode: horizontal-tb; } span.test2 { writing-mode: vertical-rl; } p.test2 { writing-mode: vertical-rl; }

自分で試してみる»