当前位置：首页 > 前端开发 > 正文

HTML文字如何用CSS垂直显示？

在HTML中设置字体竖直显示，主要通过CSS的 writing-mode属性实现，例如使用 writing-mode: vertical-rl;可将文本设置为从右向左的垂直排列，或 vertical-lr从左向右排列，同时可配合 text-orientation: upright;保持字符直立，适用于东亚文字排版或特殊设计需求。

在HTML中设置字体竖直显示主要通过CSS实现,以下是几种常用方法及详细步骤：

使用 writing-mode 属性（推荐）

这是最符合排版规范的竖直文本解决方案,适用于中文竖排、古籍排版等场景。

HTML文字如何用CSS垂直显示？ 第1张

<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兼容模式 */
}

最佳实践建议

  1. 中文场景：优先使用 writing-mode: vertical-rl + text-orientation: upright
  2. 西文/数字：用 text-orientation: sideways 保持可读性
  3. 布局注意：
    • 竖排文本需设置固定高度
    • 避免与横排文本混用导致布局错乱
  4. 移动端适配：测试竖屏下的显示效果

引用说明：本文技术方案参考MDN Web Docs的CSS标准文档，经主流浏览器（Chrome/Firefox/Safari/Edge）验证，IE需部分兼容代码，实际开发请使用CanIUse.com检查特性支持度。

mode
0

相关文章