免费在线CSS书写模式生成器，可视化调整writing-mode和text-orientation参数（横排/竖排/侧向），实时预览中文竖排效果，一键复制CSS代码。纯前端处理。 | 无需注册 · 数据绝不上传服务器
零依赖·可离线使用
Updated: 2026-07-11
⚙️ 书写模式设置
调整 writing-mode 和 text-orientation 参数，预览不同书写方向的效果。
👁️ 实时预览
下方文字将按照选中的书写模式渲染。
中文汉字 Hello 2024
💻 CSS代码
📖 CSS writing-mode 详解
writing-mode 属性定义了文本在块级元素中的排列方向。它是实现中文竖排、古籍排版、多语言文字混排的关键属性。
常用值
horizontal-tb— （默认）内容从左到右水平排列，行从上到下vertical-rl— 内容从上到下垂直排列，行从右到左（传统中文竖排）vertical-lr— 内容从上到下垂直排列，行从左到右（蒙古文等）
搭配 text-orientation
text-orientation 控制垂直书写模式下字符的方向。使用 upright 可以让拉丁字母保持直立，mixed 允许文字自然旋转。