elementos rotados en CSS: influir en la altura de los padres correctamente

en CSS, es posible rotar elementos sin afectar el diseño o flujo del documento. Sin embargo, surgen preguntas cuando los elementos necesitan su texto rotado para afectar la altura de sus padres.

Considere el siguiente escenario:

  
Normal
  
Normal
  
Rotated
  
Normal

aplicando los siguientes css:

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

da como resultado los elementos vecinos que superponen el texto rotado. El objetivo es modificar el CSS para asegurarse de que el elemento rotado afecte correctamente la altura de sus padres, evitando el texto superpuesto.

solución

aprovechando el soporte mejorado para el modo de escritura en los navegadores modernos se puede lograr utilizando una combinación de propiedades:

. Posición: relativo; borde: 1px sólido #ccc; relleno: 2px; margen: 2px; Ancho: 200px; } .statuscolumn I, .statuscolumn B, .Statuscolumn EM, .statuscolumn fuerte { Modo de escritura: Vertical-RL; transformación: rotar (180 grados); White-Space: Nowrap; Pantalla: bloque en línea; desbordamiento: visible; }

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

Este CSS actualizado asegura que el elemento rotado respeta la altura de su contenedor principal, evitando así la superposición del texto y logrando el diseño deseado.