css3 での word-break 属性の使用に関するチュートリアル

CSS3 には非常に重要な 属性 word-break 属性があることはわかっています。そこで、今日は皆さんを助けるために、 word-break の定義、構文、パラメーター、および短い例を紹介します。理解する。

1.

word-break属性を定義して自動行折り返しの処理方法を指定します。ヒント: word-break 属性を使用すると、ブラウザに任意の位置で改行をさせることができます。

2. 構文とパラメータ

word-break:normal (デフォルト)|break-all|keep-allnormal: アジア言語および非アジア言語のテキスト規則に従って、単語内での改行が許可されます: 中国語は境界線の中国語文字は改行され、英単語は改行されます。 単語が長すぎる場合、境界線が固定属性の場合、それ以降の部分は表示されません。 Break-all: 英語の単語を強制的に切り捨てたり、改行を強制したりできます。 動作は、アジア言語の通常の場合と同じです。非アジア言語のテキスト行の任意の単語内での区切りも許可されます。この値は、非アジアのテキストを含むアジアのテキストに適しています。 keep-all: アジア以外のすべての言語に対して通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。つまり、中国語の場合、前後の句読点内の漢字句は完全に折り返され、英語の単語も完全に折り返されます。注: Firefox と Opera では認識できません。

3. 説明

ワードブレーク: ブレークオールはブレークワードです。単語が境界に達すると、次の文字が自動的に次の行に進みます。これは主に英語の長い文字列の問題を解決します (word-wrap:break-word が長いテキスト文字列に対して機能しないという上記の欠点を補うだけです)。

4. 例

英語の単語の長い文字列に属する上記の単語 congratulation を続けると、word-break:break-all によって単語が切り捨てられ、行の末尾が conra (先頭) のようなものになります。 -congratulationの終わりの部分）、次の行はtulationの後ろの部分（conguatulation）です。 Word-break:keep-all は、中国語、日本語、韓国語の連続した単語を指します。つまり、ワードラップなしで今回のみを使用すると、中国語はラップされません。 (英語の文章は正常です。)

5. 概要

アクションの範囲は、div などの標準のブロックレベルの要素のみです。th や td などのテーブル要素は認識されますが、効果はありません (Chrome、word-break でテスト済み)。 :break-all は有効ですが、完全な互換性とメモリの利便性の観点から、前の結論が優先されます)。 Firefox と Opera はワードブレークを認識できず、ましてや Firefox で th や td でワードブレークを使用した場合の効果も認識できません。

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

関連記事:

CSS3 を使用して徐々に光る四角形の境界線を作成する実装手順

CSS3 のアニメーション プロパティの使用方法

H5 を使用して水滴の特殊効果を作成するチュートリアル

以上がcss3 での word-break 属性の使用に関するチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。