.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;
}
严格遵循《中文文案排版指北》标准规范。自动在中英文之间、中文与数字之间插入标准半角空格(盘古之白),智能转换中文语境下的全角/半角标点符号,统一规范弯引号与直角引号,消除冗余空格,同时完整保护 Markdown 语法、行内代码与代码块。纯前端离线计算,让文案、博客与技术文档赏心悦目。
自动补全空格数
{{ stats.spacesAdded }}
规范标点符号数
{{ stats.punctuationsFixed }}
清除冗余空格数
{{ stats.redundantSpacesRemoved }}
统一引号对数
{{ stats.quotesUnified }}
保护代码/链接段
{{ stats.protectedBlocks }}
字符总数变化
{{ stats.origChars }} → {{ stats.newChars }}
间距与空格规范 (Spacing Rules)
中英文之间添加半角空格 (如: Vue 框架)
中文与数字之间添加半角空格 (如: 第 2 个版本)
数字与常用单位之间添加空格 (如: 100 MB, 2.5 GHz)
清理中文全角标点周围多余空格 (如: 你好 , 世界 → 你好,世界)
合并连续多余半角空格为单空格
清理每行行首与行尾多余空白符
标点符号与特殊字符规范 (Punctuation & Symbols)
中文语境标点转全角 (, . ! ? : ; ( ) → , 。 ! ? : ; ( ))
全角英文/数字转半角 (123 ABC → 123 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% 在您的浏览器端本地离线计算完成,不会向任何远端服务器发送或存储您的文案与代码数据,完全保护文档与商业机密安全。