display, visibility y overflow en CSS

La propiedad display

display decide cómo se comporta una caja en la página. Es probablemente la propiedad más importante de CSS para maquetar.

Valor	Comportamiento
block	Empieza en línea nueva y ocupa todo el ancho. Respeta width, height y todos los márgenes
inline	Va en línea con el texto. Ignora width, height y los márgenes verticales
inline-block	Va en línea, pero respeta width, height y márgenes. Ideal para botones
none	El elemento desaparece por completo
flex	Convierte el elemento en un contenedor Flexbox
grid	Convierte el elemento en un contenedor Grid

Cada etiqueta HTML tiene un display por defecto (<div> es block, <span> es inline…), pero puedes cambiarlo:

nav a { display: block; padding: 12px; }      /* enlaces que ocupan toda la fila */
.etiqueta { display: inline-block; padding: 2px 8px; border-radius: 4px; }

Ocultar elementos: tres formas distintas

	display: none	visibility: hidden	opacity: 0
¿Se ve?	No	No	No
¿Ocupa su espacio?	No: los demás se mueven	Sí: queda un hueco	Sí
¿Se puede pulsar?	No	No	Sí (cuidado)
¿Lo lee un lector de pantalla?	No	No	Sí
¿Se puede animar?	No	No	Sí

• display: none: para ocultar de verdad, como un menú cerrado o una pestaña no activa.
• visibility: hidden: cuando quieres que no se vea pero que no se mueva nada alrededor.
• opacity: 0: para animaciones de aparecer y desaparecer. Recuerda que el elemento sigue ahí y se puede pulsar.

El atributo HTML hidden equivale a display: none.

Ocultar solo visualmente

A veces quieres ocultar un texto a la vista pero que los lectores de pantalla sí lo lean, por ejemplo un “Menú” en un botón que solo tiene un icono. Para eso se usa esta clase tan conocida:

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

Contenido que no cabe: overflow

Si le das a una caja un alto (o ancho) fijo y el contenido no cabe, se desborda. overflow decide qué hacer:

.caja { height: 150px; overflow: auto; }

Valor	Qué pasa
visible	El contenido se sale de la caja (por defecto)
hidden	Lo que sobra se corta y no se ve
scroll	Siempre muestra barras de desplazamiento
auto	Muestra barras solo si hacen falta. Casi siempre es la mejor opción

También puedes controlar cada eje: overflow-x: auto; overflow-y: hidden;.

Es muy útil para tablas anchas en el móvil: envuélvelas en un contenedor con overflow-x: auto y podrán desplazarse de lado sin romper la página.

.tabla-contenedor { overflow-x: auto; }

Textos que no caben en una línea

.titulo-tarjeta {
  white-space: nowrap;      /* no partir la línea */
  overflow: hidden;         /* cortar lo que sobra */
  text-overflow: ellipsis;  /* poner "..." al final */
}

Errores típicos

• Poner width o height a un elemento inline (como un <a> o un <span>) y que no haga nada. Cámbialo a inline-block o block.
• Usar overflow: hidden para “arreglar” algo que se sale, y cortar sin darte cuenta un menú desplegable o una sombra.
• Ocultar con opacity: 0 un botón y que siga recibiendo clics invisibles.