UD5工具箱
页面标题层级分析器 - h1~h6 结构检查
输入 HTML 或网址，提取所有标题标签，生成文档大纲树，检测跳跃和缺失。
文本换行优化器 - 标题漂亮折行预览
在字符之间点击 · 切换换行，或使用自动换行功能。实时预览排版效果。
自动换行：
字/行
在上方输入文本后，这里将显示可编辑的字符
总字符：0
行数：1
换行数：0
预览内容将显示在这里
常见问题与知识点
为什么要优化文本换行？
精心设计的换行可以提升标题的可读性和视觉吸引力。在社交媒体（如微信朋友圈、小红书、微博）中，合理的断行能让标题更有节奏感，增加用户的阅读兴趣和互动率。尤其在移动端，短行标题更容易被一眼扫过。
最佳每行字数是多少？
移动端标题建议每行 5-8个字（约15-20个字符含标点），这样可以保证在手机屏幕上完整显示而不被截断。朋友圈标题通常不超过3-4行，小红书标题2-3行为佳。过长的行会显得拥挤，过短则显得零碎。
换行在不同平台的显示效果一样吗？
不同平台对换行的处理基本一致，但字体渲染和行间距可能略有差异。建议在发布前使用本工具的预览功能，切换不同风格模拟真实场景。微信朋友圈会居中显示，小红书支持左对齐排版，本工具都提供了对应预览。
如何判断断行是否好看？
好的断行遵循几个原则：语义完整（不在词语中间断开）、节奏均匀（每行长度相近）、视觉平衡（避免单字成行）。本工具的实时预览可以帮助你快速尝试不同的断行方案，找到最佳视觉效果。
智能字符实体替换器 - HTML敏感符号一键转换
批量将文本中的<,>,&,等转换为HTML实体，或反向还原，包含选项保留已转义实体。
文本高亮效果生成器 - 荧光笔/下划线动画
制作像荧光笔划过的高亮背景或扫描下划线效果，导出类名。
内联CSS提取器 - 将style标签移为外部
提取HTML中所有内嵌 `<style>` 标签的内容，合并生成单独CSS文件。
首屏大图模板生成器 - 文字叠加背景图
选择背景图片（或使用占位色），配置标题、副标题和按钮，生成Hero区域代码。
自定义下拉选择框美化 - 取代原生select
创建带有向下箭头和自定选项风格的自定义选择框HTML+CSS代码。
打印样式表生成 - 一键隐藏无用元素
自动生成适合打印的`@media print`样式，重置背景色、字号并隐藏导航。
HTML内联样式提取器 - 批量整理为独立CSS
提取HTML中内联style属性或嵌入式style标签，转变为独立CSS规则，辅助样式重构。
字距与字偶距预览器 - 实时调节CSS letter-spacing
输入文本，滑块调节letter-spacing和word-spacing，实时显示效果并复制CSS。
PDF 页面提取器 - 选择范围另存新PDF
上传PDF，选择需要保留的页码（如1,3-5），生成仅含这些页面的新文档。
HTML转JSX/TSX工具 - 替换核心属性
将普通HTML片段一键转为React可用的JSX，处理class→className、style等。
复古终端样式生成器 - 绿色字符CRT效果
生成具有扫描线、荧光拖影和屏幕弯曲效果的纯CSS复古电脑终端样式。
滚动吸附生成器 - 全屏滚动页面模板
配置多屏垂直或水平滑动卡片，生成带CSS Scroll Snap的HTML页面代码。
CSS Grid可视化调试器 - 叠加网格线
为页面上使用CSS Grid的元素显示网格线和名称，辅助布局开发和调试。
CSS 滚动条样式生成器 - ::-webkit-scrollbar 自定义美化
通过可视化控件定制滚动条轨道、滑块、按钮等伪元素样式，即时预览并复制生成代码。
悬停提示框生成器 - 纯CSS/JS气泡样式定制
选择触发位置、箭头方向与样式，生成轻量悬停提示框代码。
Lottie动画预览器 - 拖放JSON查看动效
加载Lottie动画JSON文件，播放并控制速度、方向，预览动效效果。
中文竖排转换工具 - 横排转竖排显示
将横向中文文本转换为传统的从右至左竖排格式，可复制或导出为图片。
JSON 数据转 HTML 表格 - 嵌套折叠与排序
将 JSON 数组或对象渲染为可交互的 HTML 表格，支持嵌套展开、列排序和搜索。
JSON 差异对比器 - 高亮增删改节点
输入新旧JSON，并排展示增删改的行级差异，辅助接口变动追踪。
CSS Grid 调试覆盖层 - 显示网格线与区域
在页面上叠加可拖拽的半透明网格线，辅助网格布局对齐。
正则表达式在线测试工具 - JavaScript正则校验
在线正则表达式测试工具，支持JavaScript正则匹配、替换、提取等操作，即时显示匹配结果和高亮。
手风琴组件生成器 - 折叠面板HTML/CSS代码
在线生成可折叠的手风琴面板，自定义标题、内容与图标，支持纯CSS或简单JS切换。
CSS Reset代码生成器 - 统一默认样式重置
勾选或调整所需的重置元素（盒模型、边距等），生成自定义CSS Reset片段，确保跨浏览器一致性。
CSS Clamp() 生成器 - 最小/首选/最大字体
设定最小、首选、最大三个尺寸及视口范围，生成响应式CSS clamp()表达式。
CSS缓动函数试玩场 - 所有预设一览
并列播放所有CSS内置缓动函数（ease, linear等）的动画效果，方便对比选择。
纯CSS提示框生成器 - 鼠标悬停气泡代码
自定义箭头方向、颜色、大小和动画，生成无需JavaScript的纯CSS tooltip组件代码。
图片精灵图辅助定位器 - 单击获取CSS坐标
上传精灵图，自动切片检测或手动框选获取背景定位数值，生成CSS Sprite代码。
新拟态设计生成器 - CSS Neumorphism样式代码
调节光源角度、颜色和距离，生成凹凸柔和的新拟态UI元素CSS盒阴影代码，潮流设计工具。
配色环和谐规则可视化 - 实时补色与分裂互补
拖拽基色指针，自动计算互补、近似、三等分等七种和谐配色方案，复制十六进制值。