css - div - ¿Cuál es la diferencia entre overflow: hidden y display: none

css visibility hidden

Question

¿Cuál es la diferencia entre overflow: hidden y display: none?

Answer 1

Desbordamiento: oculto solo dice que si el texto fluye fuera de este elemento, las barras de desplazamiento no se muestran. pantalla: ninguno dice que el elemento no se muestra.

Answer 2

Digamos que tienes un div que mide 100 x 100 px

Luego pone un montón de texto en él, como desborda el div. Si usa overflow: hidden; luego, el texto que se ajusta al 100x100 no se mostrará y no afectará el diseño.

display: none es completamente diferente. Muestra el resto de la página como si el div aún estuviera visible. Incluso si hay desbordamiento, eso se tendrá en cuenta. Simplemente deja espacio para el div , pero no lo representa. Si ambos están configurados: display: none; overflow: hidden; display: none; overflow: hidden; luego no se mostrará, el texto no se desbordará y la página se renderizará como si el div invisible aún estuviera allí.

Para que el div no afecte en absoluto la representación, ambos display: none; overflow: hidden; display: none; overflow: hidden; debe establecerse, y también, hacer algo como establecer la height: 0; . O con el width , o ambos, la página se representará como si el div no existiera.

Answer 3

Ejemplo simple de desbordamiento: oculto http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

Si edita el CCS en esa página, puede ver la diferencia entre los atributos de desbordamiento (visible | oculto | desplazamiento | automático) - y si agrega display: none al css, verá que el bloque de contenido completo desaparece.

Básicamente es una forma de controlar el diseño y el "flujo" del elemento: si permite que el usuario ingrese (desde un campo CMS), para renderizar en un bloque de tamaño fijo, puede ajustar el atributo de desbordamiento para detener el aumento de tamaño del cuadro y, por lo tanto, rompiendo el diseño de la página. (a la inversa, mostrar: ninguno impide que se muestre el elemento y, por lo tanto, toda la página se reajusta)

Answer 4

Ejemplo:

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

Si el texto en el bloque con esta clase es más grande (más largo) de lo que puede mostrar esta pequeña caja, el exceso quedará oculto. Verá el comienzo del texto solamente.

display: none; solo ocultará el bloque.

Tenga en cuenta que también tiene visibility: hidden; que oculta el contenido del bloque, pero el bloque permanecerá en el diseño, moviendo las cosas.

Answer 5

Por defecto, los elementos HTML son tan altos como se requiere para contener su contenido.

Si le da a un elemento HTML una altura fija, puede que no sea lo suficientemente grande como para contener su contenido. Entonces, por ejemplo, si tiene un párrafo con una altura fija y un fondo azul:

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

El texto dentro del párrafo se extendería más allá del borde inferior del párrafo.

La propiedad de overflow permite cambiar este comportamiento predeterminado. Por lo tanto, si agregó overflow: hidden :

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

Entonces no verías nada del texto más allá del borde inferior del párrafo. Se recortaría a la altura fija del párrafo.

display: none simplemente haría desaparecer todo el párrafo (visualmente), fondo azul y todo, como si no apareciera en absoluto en el HTML.

Answer 6

display: none significa que la etiqueta the en cuestión no aparecerá en absoluto en la página (aunque aún puedes interactuar con ella a través del dom). No habrá espacio asignado para él entre las otras etiquetas. El desbordamiento oculto significa que la etiqueta se representa con una altura determinada y con cualquier texto, lo que haría que la etiqueta se expandiera y no se muestre. Creo que lo que quieres decir es visibilidad: oculto. Esto significa que, a diferencia de mostrar ninguna, la etiqueta no está visible, pero se le asigna espacio en la página. así por ejemplo

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

pantalla: ninguna sería:

prueba | | prueba

visibilidad: oculto sería:

prueba | | prueba

En visibilidad: oculta la etiqueta se representa, simplemente no se ve en la página.

Answer 7

overflow: hidden: oculta el desbordamiento del contenido, en contraste con overflow: auto que muestra barras de desplazamiento en un div de tamaño fijo donde su contenido interno es más grande que su tamaño

display: none - oculta un elemento y no participa por completo en el diseño del contenido

PD: no hay diferencia entre los dos, no tienen ninguna relación

Answer 8

display: none elimina el elemento de la página y el flujo de la página actúa como si no estuviera allí.

overflow: hidden :

El overflow: hidden CSS overflow: hidden propiedad overflow: hidden se puede utilizar para revelar más o menos un elemento en función del ancho de la ventana del navegador.