ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLタグ内のdiv、td、pなどのコンテナでの強制改行と改行なしの実装

HTMLタグ内のdiv、td、pなどのコンテナでの強制改行と改行なしの実装

黄舟
黄舟オリジナル
2017-07-03 12:00:103166ブラウズ

p、td、p などのコンテナーでの強制改行または改行なしは、場合によっては非常に実用的です。次の記事に関連する知識がまとめられており、必要な場合はそれを参照してください。 1. 強制的に改行を行わず、省略記号で終わります。

<p style="width:100px;overflow:hidden;
white-space
:nowrap;
text-overflow
:ellipsis;" > 
你好朋友朋友朋友我为什么不能看到效果啊 
</p>

2. CSS は自動的に行を折り返す

p{ 
word-wrap
: break-word; 
word-break
: normal; }


3. CSS は英語の単語を強制的に改行します

p{word-break:break-all;}


p がネストされており、内容に応じて内側の p を自動的に折り返すようにすることができます。外層の p width を設定するだけで、white-spance:nowrap を使用できます。

word-break:break-all と word-wrap:break-word はどちらも、 p などのコンテナのコンテンツを自動的にラップできるようにします

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

1、word-break:break-all など。 p 幅が 200px の場合、その内容は自動的に 200px に折り返されます。行末に長い英単語 (congratulation など) がある場合、その単語は切り捨てられ、conra (先頭の部分) に変換されます。 congratulation) を行末に追加します。 次の部分は、行動の調整 (conguatulation) のバックエンド部分です。

2. word-wrap:break-word の例は上記と同じですが、行末が単語全体を表示するのに十分な幅がない場合に、単語全体を祝福する点が異なります。単語が切り捨てられることなく、単語全体が自動的に次の行に配置されます。

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

WORD-WRAP:break-word 対応バージョン:IE5.5以降 コンテンツは境界内で折り返されます。

必要に応じて、単語の区切りも発生します。テーブルは自動的に折り返され、伸びを防ぎます。

word-break : normal | break-all | keep-all

パラメータ:

normal: アジア言語と非アジア言語のテキスト規則に従って単語内の改行を許可します。

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

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

word-wrap :normal | Break-word

パラメータ:

normal : コンテンツが指定されたコンテナ境界を破ることを許可します

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

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

提案: 3C でワードブレイクを検出すると問題が発生し、Baidu スナップショットでも問題が発生します。この属性は OPERA FIREFOX ブラウザではサポートされていないため、代わりにwhite-space:normal; を使用できます。 FireFox で使用できます。改行は IE および IE で正しく実行できます。単語間のスペースを使用して置換することはできません。そうしないと改行が正しく実行されないことに注意してください。

以上がHTMLタグ内のdiv、td、pなどのコンテナでの強制改行と改行なしの実装の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。