.autospace-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } @media (max-width: 860px) { .autospace-grid { grid-template-columns: 1fr; } } .pane-card { background: rgba(10, 16, 30, 0.75); border: 1px solid rgba(51, 65, 85, 0.7); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .pane-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: rgba(15, 23, 42, 0.9); border-bottom: 1px solid rgba(51, 65, 85, 0.6); font-size: 0.85rem; color: #cbd5e1; } .pane-title { display: flex; align-items: center; gap: 8px; font-weight: 600; color: #22d3ee; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .pane-actions { display: flex; align-items: center; gap: 6px; } .editor-textarea { width: 100%; height: 380px; min-height: 280px; padding: 12px 14px; background: rgba(2, 6, 23, 0.7); border: none; outline: none; color: #e2e8f0; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 0.92rem; line-height: 1.75; resize: vertical; white-space: pre-wrap; word-break: break-word; } .editor-textarea:focus { background: rgba(2, 6, 23, 0.9); } .diff-preview-box { width: 100%; height: 380px; min-height: 280px; padding: 12px 14px; background: rgba(2, 6, 23, 0.8); color: #cbd5e1; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Microsoft YaHei", sans-serif; font-size: 0.92rem; line-height: 1.75; overflow-y: auto; white-space: pre-wrap; word-break: break-word; } .diff-added-space { background: rgba(34, 211, 238, 0.25); border-bottom: 2px solid #22d3ee; color: #67e8f9; padding: 0 1px; border-radius: 2px; display: inline-block; line-height: 1; } .diff-fixed-punct { background: rgba(52, 211, 153, 0.25); border-bottom: 2px solid #34d399; color: #6ee7b7; font-weight: 600; padding: 0 1px; border-radius: 2px; } .pane-footer { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: rgba(15, 23, 42, 0.85); border-top: 1px solid rgba(51, 65, 85, 0.6); font-size: 0.78rem; color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; } .config-card { background: rgba(15, 23, 42, 0.65); border: 1px solid rgba(51, 65, 85, 0.6); border-radius: 10px; padding: 18px 20px; margin-bottom: 20px; } .config-section-title { font-size: 0.88rem; font-weight: 600; color: #e2e8f0; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .config-section-title::before { content: ''; display: inline-block; width: 3px; height: 14px; background: #22d3ee; border-radius: 2px; } .stats-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; } .stat-item { background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(51, 65, 85, 0.5); border-radius: 8px; padding: 10px 14px; text-align: center; } .stat-label { font-size: 0.75rem; color: #94a3b8; margin-bottom: 4px; } .stat-value { font-size: 1.25rem; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; color: #f1f5f9; } .stat-value.highlight-cyan { color: #22d3ee; } .stat-value.highlight-green { color: #34d399; } .stat-value.highlight-orange { color: #fb923c; } .tag-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 0.72rem; font-family: ui-monospace, SFMono-Regular, monospace; background: rgba(34, 211, 238, 0.12); color: #22d3ee; border: 1px solid rgba(34, 211, 238, 0.3); } .option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px 20px; } .rule-card { background: rgba(2, 6, 23, 0.5); border: 1px solid rgba(51, 65, 85, 0.5); border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; } .rule-card h4 { color: #38bdf8; font-size: 0.9rem; margin-bottom: 6px; font-weight: 600; } .rule-card p { color: #94a3b8; font-size: 0.82rem; line-height: 1.6; margin: 0; } .rule-card .example { margin-top: 6px; font-family: ui-monospace, SFMono-Regular, monospace; font-size: 0.8rem; color: #cbd5e1; } .rule-card .bad { color: #f87171; text-decoration: line-through; margin-right: 8px; } .rule-card .good { color: #34d399; }
/ 中英文排版规范美化器 ← 首页

中英文排版规范美化器

排版指北标准规范 纯前端离线运行 拓展时间: 2026-08-31
严格遵循《中文文案排版指北》标准规范。自动在中英文之间、中文与数字之间插入标准半角空格(盘古之白),智能转换中文语境下的全角/半角标点符号,统一规范弯引号与直角引号,消除冗余空格,同时完整保护 Markdown 语法、行内代码与代码块。纯前端离线计算,让文案、博客与技术文档赏心悦目。
自动补全空格数
{{ stats.spacesAdded }}
规范标点符号数
{{ stats.punctuationsFixed }}
清除冗余空格数
{{ stats.redundantSpacesRemoved }}
统一引号对数
{{ stats.quotesUnified }}
保护代码/链接段
{{ stats.protectedBlocks }}
字符总数变化
{{ stats.origChars }} → {{ stats.newChars }}
INPUT // 原始文案文本
粘贴 清空
OUTPUT // 规范美化排版结果
纯文本 高亮对比 复制结果 下载文件 结果转输入
间距与空格规范 (Spacing Rules)
中英文之间添加半角空格 (如: Vue 框架) 中文与数字之间添加半角空格 (如: 第 2 个版本) 数字与常用单位之间添加空格 (如: 100 MB, 2.5 GHz) 清理中文全角标点周围多余空格 (如: 你好 , 世界你好,世界) 合并连续多余半角空格为单空格 清理每行行首与行尾多余空白符
标点符号与特殊字符规范 (Punctuation & Symbols)
中文语境标点转全角 (, . ! ? : ; ( ), 。 ! ? : ; ( )) 全角英文/数字转半角 (123 ABC123 ABC) 规范化省略号 (... / 。。。……) 规范化破折号 (-- / ————)
引号样式统一 (Quotes Style Normalization)
选择引号统一格式: 规范弯引号 “ ” 与 ‘ ’ 规范直角引号 「 」 与 『 』 保持原样不修改
语法保护机制 (Syntax & Code Protection)
保护 Markdown 多行代码块 (```...```) 保护 Markdown 行内代码 (`code`) 保护 URL 链接与 Markdown 链接 (http://... / [title](url)) 保护 HTML 标签及属性 (<div class="...">)
载入示例数据: 技术文案 (中英混排+代码) 博客段落 (乱标点+无空格) 引号与单位混排示例
立即排版美化

《中文文案排版指北》核心规范速查

1. 中英文之间需要空格 (盘古之白)

在中文和英文字符、拉丁字母之间,应保留一个半角空格,提升可读性。

在精通Vue和React之后 → 在精通 Vue 和 React 之后

2. 中文与数字之间需要空格

在中文与阿拉伯数字之间,应保留一个半角空格。

共进行了3次测试,耗时5分钟 → 共进行了 3 次测试,耗时 5 分钟

3. 数字与常用物理/存储单位之间空格

数字与单位之间应保留一个半角空格,但度数(°)、百分比(%)除外。

硬盘剩余100GB,CPU主频3.2GHz → 硬盘剩余 100 GB,CPU 主频 3.2 GHz

4. 中文语境下使用全角标点

中文句子内部或句末使用全角标点(如逗号、句号、感叹号、问号、括号)。

你好,请问你的名字是? → 你好,请问你的名字是?

5. 全角标点与其他字符间不留空格

全角标点自身已包含视觉间隙,因此不应再人为插入空格。

你好 , 欢迎使用 在线工具集 。 → 你好,欢迎使用 在线工具集。

6. 规范使用引号格式

简体中文文案推荐使用弯双引号 “ ”‘ ’,或出版规范直角引号 「 」『 』

他说:"这是一个'绝妙'的主意" → 他说:“这是一个‘绝妙’的主意”

工具安全性与隐私说明

本工具所有排版格式化、标点替换、语法保护算法均100% 在您的浏览器端本地离线计算完成,不会向任何远端服务器发送或存储您的文案与代码数据,完全保护文档与商业机密安全。