html字体竖向

HTML 字体竖向的基本概念

HTML 本身是横向排版的语言，默认文本从左到右排列，若需实现竖向排版（如中文古籍、书法展示等场景），需依赖 CSS 样式 或 特殊标签组合。

实现竖向排版的 CSS 方法

writing-mode 属性

通过 CSS 的 writing-mode 属性改变文本流向：
| 属性值 | 效果说明 |
|—————–|———————————–|
| vertical-rl | 文本垂直排列，从右到左（中文常用）|
| vertical-lr | 文本垂直排列，从左到右 |

示例代码：

<div style="writing-mode: vertical-rl; width: 50px; height: 200px;">
    竖向文本显示
</div>

text-orientation 属性

控制字符方向（配合 writing-mode 使用）：

• mixed：字符保持原有方向（中文正常,字母横向）
• upright：所有字符强制竖向

兼容旧浏览器的替代方案

表格（<table>）模拟竖排

通过单列多行表格实现竖排：

<table border="0" cellpadding="0" cellspacing="0">
    <tr><td>竖</td></tr>
    <tr><td>向</td></tr>
    <tr><td>文</td></tr>
    <tr><td>本</td></tr>
</table>

<pre> 标签 + 空格换行

利用 <pre> 保留空格特性,手动插入换行符：

<pre>
   竖   
   向   
   文   
   本
</pre>

注意事项

1. 容器尺寸：竖排时需显式设置元素宽高,否则内容可能溢出。
2. 兼容性：writing-mode 在 IE 11+ 和现代浏览器支持较好,老旧浏览器需降级处理。
3. 性能影响：复杂竖排布局可能影响渲染性能,建议简化结构。

常见问题与解答

问题 1：如何让竖排文字自动换行？

解答：
使用 writing-mode: vertical-rl; 后，文本会根据容器宽度自动换行，若需限制行宽，可设置 width 或 line-height，

div {
    writing-mode: vertical-rl;
    width: 30px; / 控制每行最大宽度 /
}

问题 2：竖排文字在移动端显示异常怎么办？

解答：

1. 检查是否设置了固定像素宽度/高度，改用百分比或 vw/vh 单位。
2. 使用媒体查询调整布局，例如横屏时切换回横向排版：

   @media (orientation: landscape) {
    .vertical-text {
        writing-mode: horizontal-tb; / 强制横向 /
    }
   }