CSS Transform but doesn't word wrap-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

    <div class="box">
            <div class="text">
                <p>Blessings to you my Sister
                    as you celebrate this milestone.
                    Love and light, Eva </p>
            </div>
        </div>
<style>
body {
  background-color: yellow;
  display: flex;
}

.box {
  background-color: lightblue;
  margin: 4in;
  transform: rotate(90deg);
  align-items: center;
}

</style>