CSS文本间距生成器
生成 CSS 的 letter-spacing、word-spacing、line-height、text-indent 和 tab-size，并实时预览段落效果。可选择 px、em 或 rem 单位，复制 CSS 和 HTML。
输入
仅用于预览和 HTML 代码片段。
使用所选单位（em 相对于字体大小）。
制表符的宽度；在预格式化文本中可见。
输出
调整间距后的文字将显示在这里。
间距声明
CSS
HTML
这对您有帮助吗？
使用此工具的更多方式
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-text-spacing-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{}'替换成您账户中的密钥。工具的字段即为请求体——没有额外包装。
让 AI 代理执行
Use the IOTools `css-text-spacing-generator` tool (CSS Text Spacing Generator) on this input:
YOUR_INPUT_HERE将此粘贴给任何已连接 IOTools MCP 服务器的代理,再加上您的输入内容。
嵌入式小组件
<iframe
src="https://iotools.cloud/embed/css-text-spacing-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS文本间距生成器 — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>把它放到您自己的页面上——免费,无需密钥,只需保留一个反向链接。
| 每次 API/MCP 调用费用 | 5 积分起 |
|---|---|
| 需要更多积分? | 查看定价 |
也可通过
使用指南
间距决定了文字是否易读。CSS 提供了五个用于控制间距的属性：letter-spacing、word-spacing、line-height、text-indent 和 tab-size。本生成器可以在实时示例段落上调整这五个属性，并复制对应的 CSS。
使用方法
- 粘贴或输入示例文本。 它仅用于预览和 HTML 代码片段。
- 调整字母和单词间距。 较小的正值会让标题和全大写文字更舒展；较小的负值则会收紧大号展示字体。
- 设置行高。 像
1.5这样的无单位值会随字体大小等比缩放。正文通常在 1.4 到 1.7 之间阅读效果最好。 - 如需书籍式段落效果，可添加首行缩进。
- 选择单位。
em和rem随字体大小缩放；px为固定值。 - 复制输出结果： 包括声明、完整的 CSS 规则以及对应的 HTML 代码片段。
速查
letter-spacing通常称为字距（tracking）。全大写标签使用约0.05em到0.1em较为合适。word-spacing只改变单词之间的间距。line-height即行距（leading）。使用无单位数值，使嵌套元素继承比例，而不是继承已计算的长度。text-indent仅缩进块级元素的第一行。tab-size用于设置white-space: pre块中制表符的显示宽度。
无障碍提示
WCAG 1.4.12 要求，当用户将行高设为至少 1.5、段落间距设为 2 倍、字母间距设为 0.12em 时，文本仍能正常使用。请避免使用固定高度的容器，以免间距增大后文字被裁切。
关于文字下划线和上划线，请参阅 CSS文本装饰生成器；关于阴影，可以试试 CSS文本阴影生成器。
隐私
所有操作都在您的浏览器中完成。您的文本和设置不会上传。
letter-spacingword-spacingline-heighttext-indenttab-sizetypographykerningleadingtracking