在HTML中设置字体竖直显示，主要通过CSS的
writing-mode属性实现，例如使用writing-mode: vertical-rl;可将文本设置为从右向左的垂直排列，或vertical-lr从左向右排列，同时可配合text-orientation: upright;保持字符直立，适用于东亚文字排版或特殊设计需求。在HTML中设置字体竖直显示主要通过CSS实现,以下是几种常用方法及详细步骤：
使用 writing-mode 属性（推荐）
这是最符合排版规范的竖直文本解决方案,适用于中文竖排、古籍排版等场景。
<style>
.vertical-text {
writing-mode: vertical-rl; /* 从右向左竖排（传统中文） */
/* writing-mode: vertical-lr; 从左向右竖排 */
height: 200px; /* 必须设置容器高度 */
text-align: center; /* 可选：文本居中 */
letter-spacing: 5px; /* 可选：字符间距 */
}
</style>
<div class="vertical-text">
白日依山尽，黄河入海流，欲穷千里目，更上一层楼。
</div>
效果说明：
vertical-rl：文本从右向左排列（符合传统中文阅读习惯）vertical-lr：文本从左向右排列- 需设置固定高度（或宽度）控制显示区域
使用 text-orientation 调整字符方向
配合 writing-mode 控制字符旋转方向：
<style>
.mixed-orientation {
writing-mode: vertical-rl;
text-orientation: mixed; /* 默认：汉字直立，字母旋转 */
text-orientation: upright; /* 所有字符直立 */
text-orientation: sideways; /* 所有字符旋转90° */
}
</style>
使用 transform: rotate() 旋转文本标签等短文本的竖直显示：
<style>
.rotated-text {
display: inline-block; /* 必须设置为行内块 */
transform: rotate(90deg); /* 顺时针旋转90度 */
transform-origin: left top; /* 旋转基点：左上角 */
margin-left: 50px; /* 调整旋转后位置 */
white-space: nowrap; /* 禁止文字换行 */
}
</style>
<div>
<span class="rotated-text">竖直标题</span>内容...
</div>
Flexbox 实现单字竖排
适合每个字符单独成行的场景：
<style>
.character-vertical {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.2;
}
</style>
<div class="character-vertical">
<span>竖</span>
<span>直</span>
<span>排</span>
<span>版</span>
</div>
兼容性处理方案
/* 兼容旧版浏览器 */
.vertical-fallback {
-webkit-writing-mode: vertical-rl; /* Safari */
-ms-writing-mode: tb-rl; /* IE兼容模式 */
}
最佳实践建议
- 中文场景：优先使用
writing-mode: vertical-rl + text-orientation: upright - 西文/数字：用
text-orientation: sideways保持可读性 - 布局注意：
- 竖排文本需设置固定高度
- 避免与横排文本混用导致布局错乱
- 移动端适配：测试竖屏下的显示效果
引用说明：本文技术方案参考MDN Web Docs的CSS标准文档，经主流浏览器（Chrome/Firefox/Safari/Edge）验证，IE需部分兼容代码，实际开发请使用CanIUse.com检查特性支持度。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/25254.html
