如何用HTML实现截图中的垂直文本效果？

以下是几种简单实现垂直文本的方案，按需选择即可：

1. 使用CSS writing-mode 属性（推荐） #

这是最符合语义的实现方式，直接控制文本排版方向，兼容现代主流浏览器。

<style>
.vertical-text {
  writing-mode: vertical-rl; /* 文本从右向左垂直排列 */
  /* 若需要从左向右排列，可改为 vertical-lr */
}
</style>

<div class="vertical-text">简单垂直文本</div>

2. 手动换行（适合短文本） #

如果是字数很少的固定文本，直接用 <br> 标签分隔每个字符就能实现垂直效果。

<div>
  垂<br>直<br>文<br>本
</div>

3. 使用CSS transform 旋转 #

通过旋转元素实现垂直展示，这种方式会改变元素的布局占位，需要额外调整位置避免偏移。

<style>
.rotated-vertical {
  transform: rotate(90deg);
  /* 设置旋转原点，优化位置表现 */
  transform-origin: top left;
  margin-left: 50px; /* 调整位置防止被遮挡 */
}
</style>

<div class="rotated-vertical">旋转式垂直文本</div>

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