button中writing-mode: vertical-rl无效，因button默认display: inline-block，而writing-mode对内联级元素布局影响有限；需显式设display: block或inline-flex，并配合text-orientation: mixed、设定width及使用逻辑属性padding-block/inline。

button 里直接写 writing-mode: vertical-rl 为什么没反应？

因为 <button></button> 默认是 display: inline-block，而 writing-mode 在内联级容器中被忽略。这不是 bug，是规范行为。

• 必须显式设 display: block 或 display: inline-flex（后者更稳妥，避免换行破坏按钮尺寸）
• 别用 float 或 position: absolute 包裹 button，会绕过文本流，writing-mode 失效
• width 必须设——竖排下 width 控制的是“每列宽度”，即文字横向占位；不设会导致文字无限向下延伸或挤成一列

竖排按钮文字该用 vertical-rl 还是 sideways-rl？

中文按钮正文必须用 writing-mode: vertical-rl。它让汉字直立、ASCII 字母和数字自动顺时针旋转 90°，符合阅读习惯；sideways-rl 是整行当图形转 90°，所有字符横躺，不可读，仅适合装饰性表头。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• vertical-lr 会导致括号方向反（) 在上、( 在下）、段落向右堆叠，中文场景禁用
• sideways-rl 目前仅 Chrome 117+ / Firefox 119+ 支持，Safari 完全不支持，不能用于生产按钮
• IE11 已无维护必要，现代项目无需加 -ms-writing-mode: tb-rl

text-orientation: mixed 不加会怎样？

不加的话，英文缩写（如 API、PDF）会全部侧躺显示，变成一列歪斜字母，用户根本认不出。这不是渲染异常，而是默认行为。

• text-orientation: mixed 是中文竖排的刚需组合：汉字 upright，ASCII 字符自动旋转
• text-orientation: upright 会让 “2024” 显示成四行细高字，阅读顺序错乱，只适合极短纯数字（如页码），且需配合 font-variant-east-asian: proportional-width
• 别在 button 中用 unicode-bidi: plaintext 干预，它可能把中文引号「」位置搞乱

line-height 和 padding 在竖排按钮里怎么调才不崩？

竖排后，line-height 的“行”变成了垂直方向，数值不变但视觉变宽；padding 的上下左右也跟着书写流翻转了——原来 padding-top 变成“右内边距”，极易误判。

• line-height 优先用无单位值（如 1.6），避免 px 在不同字号下撑开或挤压
• 改用逻辑属性：padding-block（对应书写流前后，即竖排下的上下）和 padding-inline（对应左右，即竖排下的右/左）
• 按钮高度建议用 min-height 控制，而不是固定 height，防止文字多时截断

真正难的不是那两行 CSS，而是 button 的交互反馈（比如 :hover 背景变化）在竖排后仍要保持视觉平衡——这需要额外测试点击热区是否偏移，尤其在移动端。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！