CSS 转换但不换行

Question

我有一个 DIV，其中包含已转换的文本，但文本超出了 DIV（蓝色）。我怎样才能让文本旋转，但换行并留在方框内？

<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>

Answer 1

    <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>

Answer 2

试试 CSS writing-mode。它使得只有文本而不是整个元素发生变化。

<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>

CSS 转换但不换行

CSS Transform but doesn't word wrap

css

css-transforms