HTML の div、td、p およびその他のコンテナーでの強制改行と非改行の実装

1. 改行を強制せず、省略記号で終了します。

コードをコピー

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

<div style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;" >
こんにちは、友人の皆さん、なぜ効果が見えないのでしょうか?
</div>

2. CSS自動改行

コードをコピー

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

div{ 単語折り返し: 単語区切り; 単語区切り: 通常; }

3. CSSは英語の単語を分割する

コードをコピー

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

div{単語区切り:すべて区切り;}

div がネストされている場合、内側の div がコンテンツに応じて自動的に折り返されるようにするには、外側の div の幅と white-spance:nowrap を設定するだけです。

word-break:break-allとword-wrap:break-wordはDIVなどのコンテナの内容を自動的に折り返すことができます。

それらの違いは次のとおりです。

1. word-break:break-all たとえば、div の幅が 200px の場合、そのコンテンツは自動的に 200px で折り返されます。行末に長い英語の単語 (congratulation など) がある場合、単語は切り捨てられ、行末は conra (congratulation の前半) になり、次の行は conguatulation の後半 (conguatulation) になります。

2. word-wrap:break-word 例は上記と同じですが、違いは「congratulation」という単語全体を全体として扱うことです。行末の幅が単語全体を表示するのに十分でない場合は、単語を切り捨てるのではなく、単語全体を次の行に自動的に配置します。

3. word-break;break-all サポートされているバージョン: IE5 以上。この動作は、アジア言語の場合の通常の動作と同じです。また、アジア以外の言語のテキスト行内で任意の単語の区切りを許可します。この値は、アジア以外の言語のテキストを含むアジア言語のテキストに適しています。

WORD-WRAP:break-word サポートされているバージョン: IE5.5 上記のコンテンツは境界内で折り返されます。

必要に応じて単語の区切りも行われます。テーブルは拡張を避けるために自動的に折り返されます。

単語区切り: 通常 | すべて区切り | すべて保持

パラメータ:

normal : アジア言語と非アジア言語のテキストルールに従い、単語内での改行を許可します。

break-all : この動作は、アジア言語の場合の通常の動作と同じです。また、アジア以外の言語のテキスト行内で任意の単語の区切りを許可します。この値は、非アジア言語のテキストを含むアジア言語のテキストに適しています。

keep-all : アジア以外の言語の場合は通常と同じです。中国語、韓国語、日本語の場合、単語の区切りは許可されません。少量のアジア言語テキストを含む非アジア言語テキストの構文:

単語折り返し: 通常 | 単語区切り

パラメータ:

通常: 指定されたコンテナの境界を超えてコンテンツを押し出すことを許可する

break-word : コンテンツは境界内で折り返されます。必要に応じて、単語の区切りも行われます。説明: 現在の行が指定されたコンテナーの境界を超えたときに行を区切るかどうかを設定または取得します。

対応するスクリプト機能は wordWrap です。私の他の本もご覧ください。構文: table-layout : auto | fixed パラメーター: auto : デフォルトの自動アルゴリズム。レイアウトは各セルの内容に基づいて決定されます。各セルが読み取られて計算されるまで、表は表示されません。非常に遅い修正: レイアウトアルゴリズムを修正しました。このアルゴリズムでは、水平レイアウトはテーブルの幅、テーブル境界の幅、セル間隔、および列幅のみに基づいて行われ、テーブルの内容とは関係ありません。説明: テーブルのレイアウトアルゴリズムを設定または取得します。対応するスクリプト属性は tableLayout です。

提案: word-break は 3C によって検出されると表示に問題が生じ、Baidu スナップショットでも問題が発生します - OPERA FIREFOX ブラウザはこの属性をサポートしていません。word-break 属性は white-space:normal; に置き換えることができます。これにより、FireFox と IE で行が正しく折り返されます。また、単語間のスペースは代替として使用できないことに注意してください。そうしないと、行が正しく折り返されません。

<<: MySQL 最適化 query_cache_limit パラメータの説明

>>: ウェブサイトのAboutページの紹介コンテンツの書き方