Was ist der Unterschied zwischen Überlauf: versteckt und display: none

Question

Was ist der Unterschied zwischen Überlauf: versteckt und display: none

Answer 1

Beispiel:

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

Wenn der Text in dem Block mit dieser Klasse ist größer (länger) als das, was diese kleine Box angezeigt werden kann, wird der Überschuss nur versteckt. Sie werden nur den Anfang des Textes sehen.

display: none; wird nur um den Block verstecken.

Beachten Sie auch haben visibility: hidden; die den Inhalt des Blocks versteckt, aber der Block noch im Layout sein, die Dinge bewegen.

Answer 2

display: none entfernt das Element von der Seite, und der Fluss der Seite wirkt, als wäre es gar nicht da ist.

overflow: hidden:

  

Die CSS overflow: hidden Eigenschaft kann verwendet werden, um mehr oder weniger ein Element offenbare basierend auf der Breite des Browserfensters.

Answer 3

Überlauf: versteckt sagt nur, wenn Text außerhalb dieses Elements fließt die Scrollbalken nicht zeigen. display: none sagt das Element nicht angezeigt

.

Answer 4

Einfaches Beispiel von overflow: hidden http://www.w3schools.com /Css/tryit.asp?filename=trycss_pos_overflow_hidden

Wenn Sie die CCS auf dieser Seite bearbeiten, können Sie die Differenz zwischen dem Überlauf siehe Attribute (sichtbar | versteckt | scroll | auto) - und wenn Sie Anzeige hinzufügen: keine zu der CSS, werden Sie den gesamten Inhalt Block zu sehen ist verschwindet.

Im Grunde ist es eine Möglichkeit, das Layout zu steuern und das Element „Flow“ - wenn Sie Benutzereingaben erlauben (von einem CMS Feld sagen), in einem festen Größe Block zu machen, können Sie den Überlauf Attribut stellen Sie die Box zu stoppen Erhöhung in Größe und damit das Layout der Seite zu brechen. (Umgekehrt display: none verhindert, dass das Element von der Anzeige und therfore die gesamte Seite neu justiert)

Answer 5

In der Standardeinstellung HTML-Elemente sind so groß wie benötigt, um ihre Inhalte zu enthalten.

Wenn Sie einem HTML-Elemente eine feste Höhe geben, es kann nicht groß genug sein, um seinen Inhalt zu enthalten. So zum Beispiel, wenn Sie hatte einen Absatz mit einer festen Höhe und einen blauen Hintergrund:

<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;
}

Der Text innerhalb des Absatzes würde über den unteren Rand des Absatzes erstrecken.

Die overflow Eigenschaft können Sie dieses Standardverhalten ändern. Also, wenn Sie hinzugefügt overflow: hidden:

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

Dann würden Sie nicht der Text über den unteren Rand des Absatzes sehen. Es wäre an der festen Höhe des Absatzes abgeschnitten.

display: none würde einfach den gesamten Absatz machen (visuell) verschwinden, blauen Hintergrund und alle, als ob es gar nicht in der HTML erschien.

Answer 6

Angenommen, Sie haben einen div haben, die 100 x 100 Pixel

misst

Sie setzen dann eine ganze Reihe von Text hinein, wie es die div überläuft. Wenn Sie overflow: hidden; verwenden dann der Text, der in die 100x100 passt, werden nicht angezeigt, und wird keinen Einfluss auf das Layout.

display: none ist völlig anders. Es macht den Rest der Seite als ob , wenn die div war noch sichtbar. Auch wenn es Überlauf ist, wird das berücksichtigt. Er lässt einfach Platz für die div, sie aber nicht machen. Wenn beide gesetzt sind. display: none; overflow: hidden; dann wird es nicht angezeigt wird, wird der Text nicht überlaufen, und die Seite wird gerendert werden, als ob die unsichtbare div noch da

Um überhaupt die div keinen Einfluss auf die Wiedergabe zu machen, dann sollten beide display: none; overflow: hidden; eingestellt werden, und auch, etwas tun wie Set height: 0;. Oder mit dem width oder beides, dann wird die Seite gerendert wird, als ob die div überhaupt nicht existieren.

Answer 7

overflow: hidden - der Überlauf des Inhalts versteckt, im Gegensatz zu Überlauf: Auto, die Bildlaufleisten auf einer feste Größe div zeigt, wo es inneren Inhalt ist größer als seine Größe

display: none - verbirgt sich ein Element und es tut nicht vollständig Teilnehmer Inhaltslayout

P. S. gibt es keinen Unterschied zwischen den beiden, sie sind völlig unabhängig

Answer 8

display: none bedeutet, dass das der betreffenden Tag auf der Seite nicht angezeigt wird (obwohl man immer noch mit ihr durch den dom in Wechselwirkung treten kann). Es gibt keinen Platz für sie zwischen den anderen Tags zugewiesen werden. Überlauf versteckt bedeutet, dass der Tag mit einer bestimmten Höhe und einem beliebigen Text usw. gemacht wird, die der Tag um es zu erweitern zu machen verursachen würde, wird nicht angezeigt. Ich denke, was Sie meinen fragen Sichtbarkeit: versteckt. Dies bedeutet, dass im Gegensatz zu Anzeige keine, das Tag nicht sichtbar ist, aber der Platz ist für sie auf der Seite zugeordnet. so zum Beispiel

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

display: none wäre:

Test | | Test

Sichtbarkeit: versteckt wäre:

Test | | Test

In Sichtbarkeit. Versteckte den Tag gemacht wird, es ist einfach nicht auf der Seite gesehen