当前位置：首页 > 行业动态 > 正文

html竖直文字

使用CSS writing-mode设为vertical-rl/lr，或transform旋转，结合Flex布局

实现HTML竖直文字的方法

使用CSS writing-mode属性

通过CSS的writing-mode属性可以控制文本的书写模式，结合text-orientation实现竖直排版。

属性组合 说明
writing-mode: vertical-lr; 文本垂直排列，从左到右（默认从上到下）
text-orientation: upright; 字符保持正立（避免旋转）

示例代码：

<div style="writing-mode: vertical-lr; text-orientation: upright;">
  竖直文字示例
</div>

利用CSS旋转文本

通过transform属性旋转文本,但需注意旋转后的定位问题。

html竖直文字 第1张

旋转方向 说明
rotate(90deg) 顺时针旋转90度（文字倒置）
rotate(-90deg) 逆时针旋转90度（文字倒置）

示例代码：

<div style="transform: rotate(90deg); position: absolute; left: -50px; top: 100px;">
  竖直文字（需调整定位）
</div>

Flexbox布局实现单字竖排

将每个字符作为独立元素,通过Flex布局垂直排列。

关键属性 说明
display: flex; 启用Flex布局
flex-direction: column; 子元素垂直排列

示例代码：

<div style="display: flex; flex-direction: column;">
  <span>竖</span>
  <span>直</span>
  <span>文</span>
  <span>字</span>
</div>

SVG标签直接支持竖排

SVG的<text>标签天然支持竖直文字，需配合vertical-align属性。

示例代码：

<svg width="100" height="300">
  <text x="10" y="20" writing-mode="tb">竖直文字</text>
</svg>

注意事项

  1. 浏览器兼容性：writing-mode在现代浏览器（Chrome/Firefox/Edge）支持良好,低版本IE需谨慎使用。
  2. 文字方向：中文/日文等从上到下阅读的语言需搭配text-orientation: upright;。
  3. 布局影响：旋转或Flex布局可能破坏原有文档流，建议使用position: absolute;隔离影响。

相关问题与解答

问题1：如何让竖直文字从下到上排列（如古代书稿）？
解答：修改writing-mode为vertical-rl并调整text-orientation： 

div {
  writing-mode: vertical-rl; / 从右到左垂直排列 /
  text-orientation: mixed;   / 允许混合方向 /
}

问题2：如何处理多行竖直文字（如诗歌排版）？
解答：使用Flexbox配合<br>标签强制换行： 

<div style="display: flex; flex-direction: column;">
  <span>春眠不觉晓</span><br>
  <span>处处闻啼鸟</span><br>
  <span>夜来风雨声</span><br>
  <span>花落知多少</span>
</div>
HTML竖直文字
0

相关文章