14

オーバーフロー：非表示と表示：なしの違いは何ですか？

4

8 に答える 8

27

例：

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

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

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

ブロックのコンテンツを非表示にするものもvisibility: hidden;ありますが、ブロックはレイアウト内に残り、物事を移動します。

于 2008-09-25T11:17:16.953 に答える
9

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

overflow: hidden:

CSS overflow: hiddenプロパティを使用して、ブラウザー ウィンドウの幅に基づいて要素を多かれ少なかれ表示することができます。

于 2008-09-25T11:17:08.810 に答える
5

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

于 2008-09-25T11:13:56.523 に答える
2

デフォルトでは、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: noneHTML にまったく表示されていないかのように、段落全体が (視覚的に) 消え、青色の背景とすべてが表示されます。

于 2008-09-25T17:30:05.467 に答える
2

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

そのページで CCS を編集すると、overflow 属性 (visible | hidden | scroll | auto ) の違いがわかります。また、css に display: none を追加すると、コンテンツ ブロック全体が消えることがわかります。

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

于 2008-09-25T11:20:03.017 に答える
1

divあなたが100x100pxを測定するを持っているとしましょう

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

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

divレンダリングにまったく影響を与えないようにするには、両方display: none; overflow: hidden;を設定する必要があります。また、setなどを実行しますheight: 0;。または、、widthまたはその両方を使用すると、ページはdivがまったく存在しないかのようにレンダリングされます。

于 2008-09-25T11:16:38.110 に答える
1

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

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

display:none は次のようになります。

テスト | | | テスト

visibility:hidden は次のようになります。

テスト | | | テスト

visibility:hidden では、タグはレンダリングされますが、ページには表示されません。

于 2008-09-25T11:18:57.323 に答える
1

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

display: none - 要素を非表示にし、コンテンツ レイアウトに完全に参加しません

PS 2つに違いはありません。完全に無関係です

于 2008-09-25T11:22:27.487 に答える