Quiero crear un componente CSS en el que pueda alinear el texto vertical junto al texto horizontal como se muestra en ambas imágenes. Quiero asegurarme de que el texto sea redimensionable (altura del contenedor dinámico). Su ayuda es muy apreciada, gracias.
Texto original/Texto de pantalla grande Texto redimensionado/Texto de pantalla móvil
Margen
<div class="bro-text"> <h4 style="width: {h}px">Vertical</h4> <h1 bind:clientHeight={h}> Dummy <br/> Text </h1> </div>Estilismo
.bro-text { display: flex; align-items: flex-end; } .bro-text h4, .bro-text h1 { display: inline-block; } .bro-text h4 { transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); }Resultado
Resultado del código anterior https://i.stack.imgur.com/Ma1My.png
Con CSS puro, no es muy posible diseñar su contenedor en función de la altura del contenedor. Una alternativa es jugar con una combinación de vw y px con calc para el tamaño de fuente. La altura del contenedor se debe indirectamente a la palabra ruptura cuando se acorta el ancho del puerto de visualización. Puede que tenga que encontrar un valor que se adapte a sus necesidades.
.bro-text { display: flex; width: 30%; } .vertical { writing-mode: vertical-rl; transform:scale(-1); width: auto; text-align: center; font-size: calc( 24px - 1vw ); } <div class="bro-text"> <h4 class="vertical">Vertical</h4> <h1> Dummy Dummy Text </h1> </div>