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

Question

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

Answer 1

Ejemplo:

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

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

display: none; simplemente ocultará el bloque.

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

Answer 2

Desbordamiento: oculto solo indica 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 3

Digamos que usted tiene un div que mide 100 x 100 px

Luego, se coloca un montón de texto en él, tal como se desborda el div. Si usa overflow: hidden;, entonces el texto que encaja en el 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 era visible. Incluso si hay desbordamiento, eso se tendrá en cuenta. Simplemente deja espacio para el div, pero no lo renderiza. Si ambos están configurados: display: none; overflow: hidden;, entonces no se mostrarán, el texto no se desbordará y la página se mostrará como si el div invisible aún estuviera allí.

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

Answer 4

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 CSS overflow: hidden propiedad puede ser utilizada para revelar más o menos de un elemento basado en el ancho de la ventana del navegador.

Answer 5

pantalla: ninguna significa que la etiqueta en cuestión no aparecerá en la página (aunque aún puede 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> 

display: none sería:

prueba |   | test

visibility: hidden sería:

test |                                             | test

Visibilidad: oculto, la etiqueta se representa, simplemente no se ve en la página.

Answer 6

ejemplo simple de overflow: hidden http://www.w3schools.com/Css/tryit.asp?filename=trycss_pos_overflow_hidden

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

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

Answer 7

desbordamiento: oculto: oculta el desbordamiento del contenido, en contraste con el desbordamiento: automático que muestra barras de desplazamiento en un div de tamaño fijo donde su contenido interior es más grande que su tamaño

display: none - esconde un elemento y no lo hace completamente participante en el diseño de contenido

PS no hay diferencia entre los dos, están completamente sin relación

Answer 8

De forma predeterminada, 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. Así, por ejemplo, si usted tenía 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 overflow le permite cambiar este comportamiento predeterminado. Por lo tanto, si se ha añadido overflow: hidden:

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

Entonces, no podría ver cualquiera de los textos 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.