button中writing-mode: vertical-rl失效，是因为其默认display: inline-block导致文本流被忽略；必须显式设为display: block或inline-flex，并配合text-orientation: mixed处理中英文混排，同时按竖排逻辑重设width、padding等尺寸属性。
button 里用 writing-mode: vertical-rl 会失效？先改 display
直接给 <button></button> 写 writing-mode: vertical-rl 大概率没反应——不是属性写错了，而是 <button></button> 默认是 display: inline-block，而 writing-mode 在内联上下文中被忽略。
必须显式重设显示模式：
-
display: block（最稳妥，适合独占一行的按钮） -
display: inline-flex（保留行内流，同时支持 writing-mode 和 flex 对齐） - 别用
display: inline或保持默认inline-block
示例：
<button style="writing-mode: vertical-rl; text-orientation: mixed; display: block;">提交</button>
中英文混排按钮文字必须加 text-orientation: mixed
只写 writing-mode: vertical-rl，按钮里的 “Submit” 或 “API” 会横躺成一列歪斜字符，“2024” 变成四行小字，括号方向也错乱（比如「(」跑右边、「)」跑左边）。
生成Claude风格的精美单页HTML汇报文件。当用户需要生成"汇报"、"周报"、"月报"、"项目进度"、"复盘"、"演示"、"slide deck"、"状态报告"、"工作总结"时触发。支持6种模板：周报(weekly)、项目进度(project)、月度总结(monthly)、复盘报告(postmortem)、演示文稿(slid
text-orientation: mixed 是中文按钮的标配：
- 汉字保持 upright（直立）
- ASCII 字母和数字自动顺时针旋转 90°，变成可读形态
- 中文标点（如，。！？）按竖排上下文翻转，例如「()」显示为「)(」
- 别用
text-orientation: upright——它会让 “OK” 显示成两行细高字，阅读顺序错乱
按钮宽高、换行和 padding 要按竖排逻辑重算
竖排下，width 控制的是“每列占多少水平空间”，不是传统意义上的按钮宽度；height 容易导致截断；padding 的左右实际作用于按钮的“上下”边。
- 必须设
width（如width: 2em），否则文字不折列、直接溢出 - 用
min-height替代height，让内容自然撑开 -
padding: 0 1em在竖排下 = 右侧和左侧留白 → 实际是“顶部和底部”留白，易混淆；建议改用逻辑属性：padding-block: 0.5em（书写流前后）、padding-inline: 1em（书写流左右） - 换行靠
white-space: normal（默认），允许在空格或顿号后折列；禁用white-space: nowrap
移动端 Safari 和旧版浏览器的兼容细节
Safari 13+ 已稳定支持 writing-mode: vertical-rl + text-orientation: mixed，但某些嵌套按钮（如 <button><span>文字</span></button>）首帧可能错位。
- 避免在按钮内部再套
float、position: absolute或display: table—— 这些会绕过 writing-mode 文本流 - IE11 仅支持
-ms-writing-mode: tb-rl，且不支持text-orientation，现代项目可忽略 - 字体影响常被忽视：思源黑体、Noto Sans CJK 表现稳定；Windows 下微软雅黑在竖排时部分标点位置异常，建议 fallback 到
"Noto Sans CJK SC", sans-serif
真正难的不是写出那两行 CSS，而是意识到 writing-mode 改变的是整个文本流模型——按钮里的图标顺序、justify-content 主轴方向、甚至 text-align 的含义都会跟着变。稍不注意，箭头图标就跑到文字左边而不是右边。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
