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 ネットワークフォント
