如何在高度100%的响应式div内实现文字逆时针旋转90度竖排？

方案一：CSS Transform（快速实现） #

核心思路是通过旋转文本元素，配合原点定位和位移调整，让文字从容器底部到顶部垂直排列，同时保证填满容器高度。

修改后的完整代码：

html, body{
  height:100%;
  margin: 0; /* 清除默认边距，避免页面滚动 */
}
.a{
  height:100%;
  font-size:40px;
  background-color:#cccccc;
  display:inline-block;
  position: relative; /* 作为文本容器的定位父级 */
  padding: 0; /* 清除内边距 */
}
.a .vertical-text{
  position: absolute;
  bottom: 0;
  left: 0;
  /* 逆时针旋转90度后，将文本位移回容器内 */
  transform: rotate(-90deg) translateY(100%);
  transform-origin: bottom left; /* 旋转原点设为左下角，确保定位准确 */
  white-space: nowrap; /* 避免文字换行 */
  line-height: 1; /* 统一行高，保证填满高度 */
}

<div class="a">
  <span class="vertical-text">HELLO WORLD!</span>
</div>

说明：

• 用子元素包裹文本，避免旋转影响父容器的布局
• transform-origin 和 translateY(100%) 配合，确保旋转后的文本刚好填满父容器的高度，从底部开始向上排列
• white-space: nowrap 保证文字不折行，保持完整的竖排效果

方案二：SVG 实现（响应式友好，排版精准） #

你提到的背景SVG方案完全可行，SVG本身支持矢量缩放，对响应式布局适配更好，文本排版也更精准。

完整代码示例：

html, body{
  height:100%;
  margin: 0;
}
.a{
  height:100%;
  background-color:#cccccc;
  display:inline-block;
}
.a svg{
  width: 100%;
  height: 100%;
}

<div class="a">
  <svg>
    <!-- 通过旋转和定位实现从下到上的文字排列 -->
    <text x="0" y="100%" font-size="40px" fill="#000" transform="rotate(-90, 0, 100%)">
      HELLO WORLD!
    </text>
  </svg>
</div>

说明：

• SVG的transform="rotate(-90, 0, 100%)" 表示以(0,100%)（容器左下角）为原点逆时针旋转90度
• SVG会自动适配父容器的宽高，完美支持响应式场景
• 如果需要多行文本或更复杂的排版，SVG的文本属性（如textLength、lengthAdjust）可以更精准地控制文字填满容器

两种方案都能实现你要的效果，CSS方案适合简单场景，SVG方案适合对排版精度要求更高的响应式场景。

内容的提问来源于stack exchange，提问作者nicole