CSS テキスト効果
- 前のページ CSS box-shadow
- 次のページ CSS ネットワークフォント
CSS テキストオーバーフロー、整字改行、改行規則および書き方モード
この章では、以下の属性について学びます：
text-overflowword-wrapword-breakwriting-mode
CSS テキストオーバーフロー
CSS text-overflow 属性は、ユーザーに表示される未表示のオーバーフロー内容の表示方法を指定します。
カットオフされることができます：
これには、フレームに収まらない長いテキストがあります。これには、フレームに収まらない長いテキストがあります
省略記号（...）として表示することもできます：
これには、フレームに収まらない長いテキストがあります。これには、フレームに収まらない長いテキストがあります
以下はCSSコードです：
例
p.test1 {
white-space: nowrap;
width: 200px;
width: 200px;
border: 1px solid #000000;
text-overflow: clip;
}
p.test2 {
white-space: nowrap;
width: 200px;
width: 200px;
border: 1px solid #000000;
overflow: hidden;
}
text-overflow: ellipsis;
例
以下の例では、要素にマウスを合わせたときにオーバーフローされた内容がどのように表示されるかを示しています：
div.test:hover {
}
overflow: visible;
CSS word-wrap CSSの単語折り返し（Word Wrapping）
属性は長いテキストが折り返され、次の行に移動できるようにします。
word-wrap属性を使用して、テキストを強制的に折り返すことができます - これは単語の中間で分割することを意味するかもしれません：
もし一つの単語がその領域に収まらないほど長い場合、それは外に広がります：
word-wrap属性を使用して、テキストを強制的に折り返すことができます - これは単語の中間で分割することを意味するかもしれません：
以下はCSSコードです：
例
この段落には非常に長い単語があります：thisisaveryveryveryveryveryverylongword. 長い単語は折り返され、次の行に移動します。
長い単語が折り返され、次の行に移動することが許可されます：
p {
}
word-wrap: break-word;
CSS word-break CSS折り返しルール
属性は折り返しルールを指定します。
この段落にはテキストがあります。この行はハイフンで折り返されます：
この段落にはテキストがあります。行はどんな文字でも折り返されます：
この段落にはテキストがあります。行はどんな文字でも折り返されます。
以下はCSSコードです：
例
p.test1 {
word-break: keep-all;
}
p.test2 {
word-break: break-all;
}
CSS書き込みモード
CSS writing-mode 属性はテキストの行が水平に配置されるか垂直に配置されるかを指定します。
span要素を持つテキストがあります。 vertical-rl writing-mode.
以下の例では、さまざまな書き込みモードを示しています：
例
p.test1 {
writing-mode: horizontal-tb;
}
span.test2 {
writing-mode: vertical-rl;
}
p.test2 {
writing-mode: vertical-rl;
}
CSSテキスト効果属性
以下の表に、CSSテキスト効果属性が示されています：
| 属性 | 説明 |
|---|---|
| text-align-last | テキストの最後の行がどのように整列されるかを指定します。 |
| text-justify | アライメントされたテキストがどのように整列および間隔を置かれるかを指定します。 |
| text-overflow | 表示されないオーバーフロー内容の表示方法を指定します。 |
| word-break | 非 CJK 文字の改行規則を指定します。 |
| word-wrap | 長い単語が切れ替わり、次の行に移動されることを許可します。 |
| writing-mode | 指定されたテキスト行が水平に配置されるか垂直に配置されるかを指定します。 |
- 前のページ CSS box-shadow
- 次のページ CSS ネットワークフォント
