节点/类HTML标签内文本垂直排版（含90/180/270度旋转）实现方法咨询

当然可以搞定！不管是普通HTML节点还是带自定义类的元素，都能实现文本旋转90°、180°、270°甚至原生垂直排版的效果，核心靠CSS就能轻松实现。下面我给你拆解具体实现方式：

一、用transform: rotate()实现文本旋转 #

这是最常用的方法，通过旋转元素本身来改变文本方向，适用于所有HTML元素（注意行内元素需要先转为块级/行内块才能生效）。

1. 旋转90°（顺时针） #

如果想要文本顺时针转90度展示，配合transform-origin可以调整旋转的基准点，避免元素偏移：

<div class="rotate-90">我是顺时针旋转90°的文本</div>

<style>
.rotate-90 {
  /* 核心旋转属性 */
  transform: rotate(90deg);
  /* 把旋转原点设为左上角，避免元素移位 */
  transform-origin: top left;
  /* 可选：通过浮动或者定位调整布局，避免占用多余水平空间 */
  float: left;
  margin-right: 20px;
}
</style>

要是你需要逆时针90°（也就是从上到下的垂直排版），只需要把旋转角度改成-90deg，同时调整旋转原点：

.rotate-90-counter {
  transform: rotate(-90deg);
  transform-origin: bottom left;
}

2. 旋转180° #

这个场景很简单，直接翻转文本，适合倒序显示的需求：

<p class="rotate-180">我是旋转180°的文本</p>

<style>
.rotate-180 {
  transform: rotate(180deg);
  /* 旋转180度默认以中心为原点，一般不需要额外调整原点 */
}
</style>

3. 旋转270°（等同于逆时针90°） #

rotate(270deg)的效果和rotate(-90deg)完全一致，看你习惯哪种写法就行：

<span class="rotate-270">我是旋转270°的文本</span>

<style>
.rotate-270 {
  transform: rotate(270deg);
  transform-origin: bottom right;
  /* 行内元素必须转成行内块才能应用transform */
  display: inline-block;
}
</style>

二、原生垂直排版（无需旋转） #

如果想要真正的竖排文字（比如中文传统竖排），可以用CSS的writing-mode属性，这种方式不需要旋转元素，文本本身就是垂直方向排列的：

<div class="vertical-text">我是原生垂直排列的文本</div>

<style>
.vertical-text {
  /* 从右到左竖排，适合中文竖排习惯 */
  writing-mode: vertical-rl;
  /* 或者用 vertical-lr 实现从左到右竖排 */
  /* writing-mode: vertical-lr; */
}
</style>

总结 #

不管是普通HTML节点还是带自定义类的元素，都能通过上述两种CSS方案实现文本的垂直/旋转排版：

• 想要旋转特定角度，用transform: rotate()配合transform-origin调整；
• 想要原生竖排效果，用writing-mode更合适。

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