文本框绘制 使用指南
文本框绘制在线工具,用 ASCII/Unicode 边框字符为文本包裹各种样式文本框,适合终端输出、文档装饰与聊天排版,一键复制,纯前端。
计算公式与原理
内容宽 = max(各行显示宽度) + 2 × 左右边距;上下边框长度 = 内容宽;总行数 = 文本行数 + 2 × 上下填充 + 2(上下边框)
显示宽度按"视觉宽度"计算:CJK 全角字符计 2 列、半角计 1 列,这是中文字符画不歪斜的关键;若按 code point 计数,含中文的行会明显偏短。左右边距对称作用于每行,因此内容宽随最长行变化,短行用空格补齐到同一宽度。标题模式把 "ToolBox" 居中并占用边框中段,此时边框的装饰横线被标题截断但不改变总宽。复制结果请粘贴到等宽字体环境(代码编辑器、终端),比例字体下仍会错位。
使用步骤
- 填写「水平内边距」。
- 填写「垂直内边距」。
- 结果区会即时更新;可一键复制结果用于记录或汇报。
典型使用场景
- 终端提示框与横幅:用制表符/框线字符(┌─┐│└┘)给文字加边框,适合 CLI 输出与 README。
- 简易海报与分隔:在纯文本环境做装饰区块,区分内容区。
- 代码注释区标注:用框线包裹重要说明,提升可读性。
算例参考
- 给标题加单线框:输入「系统状态」,设置单线样式,输出: ┌──────────┐ │ 系统状态 │ └──────────┘ 在等宽字体下居中显示整齐,适合日志头或终端欢迎语。
注意事项
结果为按上述公式得到的理论估算值,实际表现受数据分布、实现细节与运行环境影响,落地决策请以实测为准;本工具纯前端运行,输入不上传服务器。
- 为什么框对不齐?
- 框线依赖等宽字体(monospace);中文在部分环境按 2 字符宽、英文 1 宽,需用支持 CJK 宽度的渲染或手动补空格对齐。
- 双线和圆角有吗?
- 有。可切换单线(─│)、双线(═║)与圆角字符集,按展示平台字体支持选择。