CSS3のword-wrap属性の詳しい説明と使用例

word-wrap attribute が CSS3 の新しい属性であることは皆さんご存知のとおり、この記事では word-wrap 属性の使い方と使用時の注意事項を詳しく説明します。短いリスト。

1.

word-wrap 属性を定義して、長い単語または URL アドレスを次の行に折り返すことができます。

2. 構文とパラメータ

word-wrap:normal (デフォルト) |

break-wordnormal: 単語が長すぎる場合、コンテンツが境界を越えることを許可します。現在の行に表示されますが、折り返されません)。 Break-word: 単語が現在の行に収まらない場合、コンテンツは境界内で折り返されます。必要に応じて word-break がトリガーされます (注: word-break は区別してください)。 2 つは別のもので、1 つは属性、もう 1 つはパラメータです)。注: すべてのブラウザで認識できます。

3. 説明

word-wrap は、「単語ごとに改行」するかどうかを制御し、現在の行が指定されたコンテナーの境界を超えたときに改行するかどうかを設定または取得します。中国語も問題ありませんし、英語の文章も問題ありません。しかし、英語の長い文字列の場合は機能しません。

4. 例

congratulation この単語は、単語全体を表示するのに十分な幅がない場合、word-wrap:break-word で単語全体を扱います。単語を切り詰めることなく、単語全体が自動的に次の行に配置されます。そのため、長いテキスト文字列には機能しません。 word-wrap:normal がデフォルトであり、英単語は分割されません。

5. 概要

アクションの範囲は div などの標準のブロックレベル要素のみです。 th や td などのテーブル要素は認識されますが、効果はありません (td の場合、th と width のワードラップは IE で機能します)。ただし、完全な互換性と便利なメモリの観点からは、前の結論が優先されます)。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

CSS を使用せずにマウスオーバーのスタイルを変更する方法

HTML Web ページの位置がずれる原因と解決策

Js が DOM オブジェクトを操作するプロセス

以上がCSS3のword-wrap属性の詳しい説明と使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。