CSS 转换但不自动换行答案

【问题标题】：CSS Transform but doesn't word wrapCSS 转换但不自动换行
【发布时间】：2021-11-21 22:15:42
【问题描述】：

我有一个 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>

【问题讨论】：

标签： css css-transforms

【解决方案1】：

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

【讨论】：

我从来没有想过，太棒了。谢谢

【解决方案2】：

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

【讨论】：