如何在 HTML 编辑器中实现基于 CSS Text-combine-upright 的纵向排版数字-html教程-PHP中文网

text-combine-upright 在主流编辑器中根本不会生效，因其依赖浏览器布局引擎触发，而 codemirror、monaco 等编辑器将 contenteditable 区域视为纯文本容器，不执行该属性的排版逻辑；即使样式声明有效，编辑态下也会断开合并，仅预览态在满足 writing-mode、字体及浏览器支持（chrome≥80、firefox≥115、safari 不支持）时才可能渲染成功。

如何在 html 编辑器中实现基于 css text-combine-upright 的纵向排版数字

text-combine-upright 在主流编辑器里根本不会生效

直接说结论：text-combine-upright 是 CSS 书写模式（writing-mode）的配套属性，专为东亚垂直排版设计，但它的实际渲染依赖浏览器对「内联元素中窄字符自动合并」的支持——而绝大多数 HTML 编辑器（如 CodeMirror、Monaco、Ace、Tiptap、Slate）默认把编辑区域当作纯文本容器或富文本块处理，contenteditable 元素内部不触发该 CSS 的布局逻辑，即使写了 text-combine-upright: all 也只会当普通文本渲染，数字照样横排。

常见错误现象包括：

在 <div contenteditable> 里写 <code><span style="text-combine-upright: all">123</span>，预览时正常，但光标进入后立刻断开合并（变成三个独立字形）
用 CSS 设置 writing-mode: vertical-rl + text-combine-upright: all 后，数字仍逐个换行，而非压成一格
开发者工具里样式显示“已启用”，但 computed 值中 text-combine-upright 为 none —— 这说明浏览器判定当前上下文不满足触发条件（比如父元素未设 font-variant-east-asian: ruby 或未匹配字符集）

真正能用的替代方案只有 SVG + `<text></text>` 定位

如果你需要用户在编辑器里「看到并操作」纵向合并的数字（比如制作日历、票据、和风 UI），唯一稳定可行的方式是绕过原生文本流，用 SVG 模拟视觉效果。核心思路：把每个数字当成独立 <text></text> 元素，手动控制 y 偏移和 font-size，让它们在垂直方向上视觉重叠。

实操建议：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

用 transform: rotate(-90deg) 配合 text-anchor="end" 实现基础竖排，再用 dy 属性微调纵向间距（例如 dy="-1.2em"）
避免使用 text-combine-upright 做「编辑态」渲染，只在「只读预览态」用它（且需包裹在 display: inline-block 容器中，并确保字体支持 CJK 字符宽度）
若必须支持编辑，可监听输入事件，将连续数字字符串（如 "2024"）实时替换成带 dy 的多个 <tspan></tspan>，同时隐藏原生光标，用绝对定位模拟光标位置

示例（最小可用 SVG 纵向数字）：

<svg width="20" height="80" viewbox="0 0 20 80"><text x="10" y="20" font-size="16" text-anchor="middle"><tspan dy="0">2</tspan><tspan dy="-16">0</tspan><tspan dy="-16">2</tspan><tspan dy="-16">4</tspan></text></svg>

Chrome/Firefox 对 `text-combine-upright` 的支持差异很关键

这个属性不是“开了就灵”，浏览器实现程度直接影响你是否白忙活：

Chrome 从 80+ 开始支持 text-combine-upright: all，但仅对 ASCII 数字 + CJK 字符有效；遇到字母或符号（如 "12a3"）会静默退回到 none
Firefox 直到 115 才完整支持，且要求父元素显式声明 writing-mode: vertical-rl 和 text-orientation: upright，缺一不可
Safari 完全不支持 text-combine-upright（截至 Safari 17.5），任何尝试都会被忽略
更隐蔽的坑：某些字体（如系统默认的 San Francisco、Segoe UI）缺少「垂直排版下数字等宽」的 OpenType 特性，即使 CSS 生效，数字也会错位或缩放异常

编辑器集成时最容易被忽略的细节

哪怕你用 SVG 方案，上线前必须验证三件事：

编辑器是否劫持了 keydown 事件并阻止了 event.preventDefault() —— 如果有，SVG 内部的 contenteditable="true" 会失效
移动端 Safari 下 SVG <text></text> 的触摸选区极小，用户几乎点不中，得额外加透明 <rect></rect> 层捕获事件
复制粘贴行为不可控：用户复制 SVG 区域，得到的是原始 XML 字符串而非“2024”文本，需监听 copy 事件手动 setData('text/plain', '2024')

复杂点不在怎么写 CSS，而在怎么让「看起来像文字」的东西，在编辑、选中、复制、缩放、打印所有环节都表现得像真文字——这通常意味着要放弃纯 CSS 路径，接受 SVG + JS 补丁的组合方案。