¿Cuál es la diferencia entre desbordamiento: oculto y pantalla: ninguno

Question

¿Cuál es la diferencia entre desbordamiento: oculto y pantalla: ninguna?

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 largo) que lo que puede mostrar este pequeño cuadro, el exceso quedará oculto. Solo verá el inicio del texto.

display: none; solo ocultará el bloque.

Tenga en cuenta que también tiene la visibilidad de : oculto; que oculta el contenido del bloque, pero el bloque aún estará en el diseño, moviendo las cosas.

Answer 2

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

desbordamiento: oculto :

  

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

Answer 3

Desbordamiento: oculto simplemente 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 4

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 | hidden | scroll | auto) - y si agrega display: none a css, verá que todo el bloque de contenido es desaparece.

Básicamente es una forma de controlar el diseño y el elemento " flujo " - Si está permitiendo la entrada del usuario (desde un campo de CMS, por ejemplo), para renderizar en un bloque de tamaño fijo, puede ajustar el atributo de desbordamiento para detener el aumento del tamaño del cuadro y, por lo tanto, romper el diseño de la página. (a la inversa, pantalla: ninguna impide que se muestre el elemento y, por lo tanto, la página completa se reajusta)

Answer 5

De forma predeterminada, los elementos HTML son tan altos como se requiere para contener su contenido.

Si le asigna 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 overflow le 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 que todo el párrafo (visualmente) desapareciera, el fondo azul y todo, como si no apareciera en el HTML en absoluto.

Answer 6

Supongamos que tienes un div que mide 100 x 100px

Luego, le pones un montón de texto, como si se desbordara el div. Si usa overflow: hidden; , el texto que se ajusta a 100x100 no se mostrará y no afectará el diseño.

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

Para que div no afecte en absoluto la representación, entonces ambos muestran: ninguno; overflow: hidden; debe configurarse, y también, hacer algo como set height: 0; . O con el ancho , o ambos, entonces la página se procesará como si el div no existiera en absoluto.

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 el contenido interno es más grande que su tamaño

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

P.S. no hay diferencia entre los dos, no tienen ninguna relación

Answer 8

pantalla: ninguna significa que la etiqueta en cuestión no aparecerá en la página en absoluto (aunque todavía puede interactuar con ella a través del dominio). No habrá espacio asignado para ello entre las otras etiquetas. Desbordamiento oculto significa que la etiqueta se representa con una cierta altura y cualquier texto, etc., lo que causaría que la etiqueta se expanda para que no se muestre. Creo que lo que quieres preguntar es la visibilidad: oculta. Esto significa que, a diferencia de mostrar ninguno, la etiqueta no está visible, pero se le asigna un 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 | & nbsp; | prueba

visibilidad: oculta sería:

prueba | & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & lbsp; & nbsp; & nbsp; & nbsp; & nbsp | prueba

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