overflow:hiddenとdisplay:noneの違いは何ですか

StackOverflow https://stackoverflow.com/questions/132649

  •  02-07-2019
  •  | 
  •  

質問

overflow:hidden と display:none の違いは何ですか?

役に立ちましたか？

解決

例：

.oh
{
  height: 50px;
  width: 200px;
  overflow: hidden;
}

このクラスのブロック内のテキストがこの小さなボックスに表示できるものより大きい (長い) 場合、超過した部分は非表示になります。テキストの先頭のみが表示されます。

display: none; ブロックを非表示にするだけです。

あなたも持っていることに注意してください visibility: hidden; これにより、ブロックのコンテンツが非表示になりますが、ブロックはレイアウト内に残り、オブジェクトを移動させます。

他のヒント

display: none ページから要素を削除すると、ページのフローはその要素がまったく存在しないかのように動作します。

オーバーフロー：隠れた:

CSS overflow: hidden プロパティを使用すると、ブラウザ ウィンドウの幅に基づいて要素の一部を表示できます。

Overflow:hidden は、テキストがこの要素の外側に流れた場合にスクロールバーが表示されないことを示すだけです。display:none は要素が表示されていないことを示します。

オーバーフローの簡単な例:隠れた http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

そのページで CCS を編集すると、オーバーフロー属性 (visible | hidden |scroll | auto ) と、display を追加した場合の違いがわかります。CSS に何も追加しないと、コンテンツ ブロック全体が消えていることがわかります。

基本的に、これはレイアウトと要素の「フロー」を制御する方法です。ユーザー入力 (CMS フィールドなどから) を許可して、固定サイズのブロックでレンダリングできるようにしている場合は、オーバーフロー属性を調整してボックスのサイズが増加するのを防ぐことができます。ページのレイアウトを壊します。(逆に、次のように表示します:none を指定すると、要素の表示が妨げられるため、ページ全体が再調整されます)

デフォルトでは、HTML 要素はコンテンツを含めるのに必要な高さになります。

HTML 要素に固定の高さを指定すると、コンテンツを含めるのに十分な大きさにならない可能性があります。たとえば、高さが固定され、背景が青色の段落があるとします。

<p>This is an example paragraph. It has some text in it to try and give it a reasonable height. In a separate style sheet, we’re going to give it a blue background and a fixed height. If we add overflow: hidden, we won’t see any text that extends beyond the fixed height of the paragraph. Until then, the text will “overflow” the paragraph, extending beyond the blue background.</p>

p {
    background-color: #ccf;
    height: 20px;
}

段落内のテキストは段落の下端を超えて広がります。

の overflow プロパティを使用すると、このデフォルトの動作を変更できます。それで、あなたが追加した場合 overflow: hidden:

p {
    background-color: #ccf;
    height: 20px;
    overflow: hidden;
}

そうすれば、段落の下端を超えるテキストは表示されなくなります。段落の固定高さにクリップされます。

display: none HTML にまったく表示されないかのように、段落全体が (視覚的に) 青色の背景とともに消えてしまいます。

あなたが持っているとしましょう div 100 x 100ピクセルのサイズ

次に、div をオーバーフローするような大量のテキストをその中に入れます。使用する場合 overflow: hidden; 100x100 に収まるテキストは表示されず、レイアウトには影響しません。

display: none は全く違います。ページの残りの部分をレンダリングします かのように もし div まだ見えていました。オーバーフローがあった場合でも考慮されます。それは単に、 div, 、しかしレンダリングされません。両方が設定されている場合: display: none; overflow: hidden; そうすれば、テキストは表示されず、テキストはオーバーフローせず、ページは目に見えないものであるかのようにレンダリングされます。 div まだそこにいました。

を作るために、 div レンダリングにまったく影響しない場合は、両方とも display: none; overflow: hidden; を設定する必要があり、また、次のようなことを行います height: 0;. 。または width, 、またはその両方の場合、ページは div がまったく存在しないかのようにレンダリングされます。

オーバーフロー：hidden - オーバーフローとは対照的に、コンテンツのオーバーフローを非表示にします。auto 内部コンテンツがそのサイズよりも大きい固定サイズの div にスクロールバーを表示する

画面：none - 要素を非表示にし、コンテンツのレイアウトに完全に関与しません。

追伸両者に違いはなく、全くの無関係です

display:none は、問題のタグがページにまったく表示されないことを意味します (ただし、dom を介してタグを操作することはできます)。他のタグの間にスペースが割り当てられることはありません。オーバーフロー非表示とは、タグが特定の高さでレンダリングされ、タグを拡張してレンダリングするテキストなどが表示されなくなることを意味します。あなたが尋ねたいのは、可視性:非表示であると思います。これは、display none とは異なり、タグは表示されませんが、ページ上にスペースが割り当てられることを意味します。たとえば

<span>test</span> | <span>Appropriate style in this tag</span> | <span>test</span>

表示:なしは次のようになります:

テスト| |テスト

可視性:非表示は次のようになります:

テスト| |テスト

Visibility:hidden ではタグはレンダリングされますが、ページ上に表示されないだけです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top