HTML文字垂直排列需用CSS实现：一、writing-mode设vertical-rl或vertical-lr；二、text-orientation控字符朝向；三、transform旋转容器；四、flex-direction: column逐字堆叠；五、grid布局精确定位字符。
如果您希望在网页中实现文字的垂直排列效果，HTML本身不直接提供垂直排版属性，需结合CSS的writing-mode、text-orientation等属性来控制文字方向。以下是实现HTML文字垂直排列的多种方法：
一、使用writing-mode属性设置文字流方向
writing-mode定义文本行的排列方向，可将水平书写模式切换为垂直书写模式，适用于中文、日文等竖排场景。
1、在HTML元素的style属性中添加writing-mode样式，例如：<div style="writing-mode: vertical-rl;">文字内容</div>。
2、vertical-rl表示文字从上到下排列，行从右向左排列；vertical-lr表示文字从上到下排列，行从左向右排列。
立即学习“前端免费学习笔记（深入）”；
3、若需兼容旧版浏览器，可同时添加-moz-writing-mode（Firefox）、-webkit-writing-mode（Safari）等前缀。
二、结合text-orientation控制单个字符朝向
text-orientation用于指定垂直排版中字符的旋转方式，确保字母、数字和标点符号以可读形式呈现。
1、当writing-mode设为vertical-rl时，添加text-orientation: mixed;使拉丁字母保持正立，汉字正常显示。
2、text-orientation: upright;强制所有字符均正立显示，适合全角文字为主的竖排需求。
3、text-orientation: sideways;使所有字符顺时针旋转90度，适用于纯英文竖排标题等特殊设计。
三、通过transform旋转整个文本容器
对块级元素应用CSS transform可实现视觉上的垂直效果，不改变文档流结构，适用于少量文字或标题。
1、设置容器宽度为固定值，例如width: 20px;并启用white-space: nowrap;防止换行。
2、添加transform: rotate(90deg);使内容整体顺时针旋转90度。
3、配合transform-origin调整旋转基点，例如transform-origin: top left;避免位置偏移。
四、使用flex布局配合flex-direction模拟垂直文字流
通过将每个字符包裹为独立子元素，并用flex布局逐行堆叠，可手动构造垂直阅读顺序。
1、将目标文本拆分为单字符数组，分别放入span标签中，例如：<span>文</span><span>字</span><span>垂</span><span>直</span>。
2、外层容器设置display: flex; flex-direction: column;使子元素纵向堆叠。
3、为每个span设置text-align: center;和line-height: 1em;保证字符居中对齐且间距一致。
五、利用grid布局按行列定位单个字符
CSS Grid可用于精确控制每个字符在二维空间中的位置，适用于需要精细排版的垂直标题或装饰性文字。
1、将文本逐字符封装进独立div，并置于grid容器内。
2、容器设置display: grid; grid-template-rows: repeat(auto-fit, 1em);，每行高度等于一个字符。
3、使用grid-row-start属性为每个字符指定所在行号，例如第一个字符grid-row-start: 1;，第二个grid-row-start: 2;，依此类推。
