実験コードは次のとおりです。
ヒント:最初にいくつかのコードを変更してから、1。IEとFFでテストを実行すると、IEでテキストオーバーフローのみが発生します。
注:コメントによって引き起こされるテキストオーバーフローは、IEのバグです。
2。フロートを取り外し:左; <div style = float:left> </div>では、余分な単語「豚」が欠落しており、ページが正常に表示されていることがわかります。
ヒント:最初にいくつかのコードを変更してから、同じフロートを実行できます:右; in <div style = float:right; width:400px>。余分な豚の単語も消え、ページは正常に表示されます。
ヒント:最初にいくつかのコードを変更してから、指示を実行できます。コメントによって引き起こされるテキストオーバーフローは、ブロックフローティングに関連しています。
3.コメントを<div style = float:left> </div>の前面に転送すると、余分な豚の単語が消え、ページが正常に表示されます。
ヒント:最初にいくつかのコードを変更してから、コメントを実行して<div style = float:right; width:400px>↓に転送できます。これは余分な豚</div>です。余分な豚の単語も消え、ページは正常に表示されます。
ヒント:最初にいくつかのコードを変更してから、手順を実行できます。コメントによって引き起こされるテキストオーバーフローは、その場所に関連しています。 (ポイント2と組み合わせて理解できます)
4。幅を削除:<div style = float:right; width:400px>の400pxで、余分な豚の単語が消え、ページが正常に表示されます。
ヒント:最初にいくつかのコードを変更してから、命令を実行できます。コメントによって引き起こされるテキストオーバーフローは、テキストブロックの固定幅に関連しています(絶対値または相対値であるかどうか)。
5。コメントの数を増やす:1つのコメントの場合、1つの単語が表示されます。 2つのコメントの場合、3つの単語が表示されます。 3つのコメントがあると、5つの単語が表示されます...
ヒント:最初にいくつかのコードを変更してから実行できます
ヒント:最初にいくつかのコードを変更してから実行できます
ヒント:最初にいくつかのコードを変更してから実行できます
ヒント:最初にいくつかのコードを変更してから実行できます。上記のルールからフォーミュラを取得します。テキストのオーバーフローの単語の数=コメントの数 * 2-1。ここの単語の数は、中国語または英語の数がある場合に真実です。
あふれるテキストワードカウントがテキストワードカウントよりも大きい場合、テキストブロックは消えます。
ヒント:最初にいくつかのコードを変更してから、手順を実行できます。あふれる単語の数は、コメントの数に関連しています。
1と2のテストから、2つのフローティングブロックの間にコメントを配置しないでください。
解決:
1.コメントはありません。最も簡単で最速の解決策、hehe ...
ヒント:最初にコードを変更してから2を実行できます。2つのフローティングブロック間にコメントを配置しないでください。
ヒント:最初にコードを変更してから3を実行できます。次のような新しい<div> </div>の間にテキストブロックを含めます。
ヒント:最初にコードを変更してから4を実行できます。テキストブロックの固定幅を削除します。これには3と類似しています。
ヒント:最初にいくつかのコードを変更してから、不十分または不正確な上記の分析とソリューションを実行できます。私を議論し、修正するためのようこそ。