float 不适合古风竖排文字折行，因其非为文本流方向设计，会导致布局错乱、换行不可控、语义丢失；应使用 writing-mode + text-orientation 实现原生竖排。
float 不能实现古风竖排文字折行——它根本不是为文本流方向设计的，强行用会导致布局错乱、换行不可控、语义丢失。
为什么 float 不适合竖排文字折行
竖排文字的核心需求是：文字从上到下书写，行内从右到左排列（中文古籍），且自动按容器高度“折列”（即传统意义上的“折行”）。float 只能将块级元素向左/右偏移，对行内文字的书写方向、基线对齐、断行逻辑毫无影响。常见错误现象包括：
- 文字仍水平排列，只是被“挤”到一侧，无法形成真正的竖列
-
float后续元素发生塌陷，需要额外清除浮动，破坏阅读流 - 浏览器无视
white-space: pre-wrap或direction对float元素的影响 - 响应式场景下，列高变化时无法自动重排文字
真正可用的方案：用 writing-mode + text-orientation
现代浏览器（Chrome 48+、Firefox 41+、Safari 12.1+、Edge 79+）原生支持竖排布局，无需 hack。关键属性组合如下：
.vertical-text {
writing-mode: vertical-rl; /* 从上到下，从右到左 */
text-orientation: mixed; /* 汉字直立，数字/拉丁字母顺时针旋转90° */
line-height: 1.6;
}
使用场景：古籍展示、诗词排版、印章旁题跋等。注意两点：
-
writing-mode: vertical-rl是基础，vertical-lr（从上到下、从左到右）极少用于中文古风 -
text-orientation: mixed比upright更符合传统习惯——阿拉伯数字和英文会自动旋转，避免歪斜阅读 - 若需控制“列宽”（即每列几个字），用
max-width配合容器高度；折列由浏览器根据容器height和字号自动计算
兼容旧浏览器（IE10–11）的降级处理
IE10/11 支持 writing-mode，但仅支持旧语法：writing-mode: tb-rl（等价于 vertical-rl），且不支持 text-orientation。可这样写：
.vertical-text {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl; /* IE10/11 */
writing-mode: vertical-rl;
text-orientation: mixed;
}
性能与兼容性影响：
- 无 layout thrashing，渲染效率高于 JS 模拟竖排
- 屏幕阅读器能正确朗读竖排内容（语义保留），而
float+transform会破坏可访问性 - 不要在
float元素上叠加writing-mode——行为未定义，Chrome 和 Firefox 表现不一致
真正难的是标点悬挂、避头尾、异体字对齐这些排版细节，writing-mode 只解决方向问题；如果遇到「某字突然横过来」「句读位置偏移」，大概率是字体本身缺乏竖排 OpenType 特性，而不是 CSS 写错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
