Search code examples
csscss-transforms

CSS Transform but doesn't word wrap

I have a DIV that contains text which is transformed, but the text goes outside the DIV (blue). How can I have the text rotate, but wrap and stay inside the box?

<div style="display: flex; background-color: lightblue; align-items: center; margin: 6in 1in 1in;">
   <span style="transform: rotate(90deg);   font-size: 12pt; text-align: center;">Blessings to you my Sister as you celebrate this milestone. Love and light, Eva </span>
</div>

enter image description here

Solution

  • Try CSS writing-mode. It makes it so that only the text changes instead of the whole element.

    <div
      style="
        display: flex;
        background-color: lightblue;
        align-items: center;
        justify-content: center;
        margin: 1in 1in 1in;
      "
    >
      <span
        style="writing-mode: vertical-rl; font-size: 12pt; text-align: center;"
        >Blessings to you my Sister as you celebrate this milestone. Love and
        light, Eva
      </span>
    </div>