网页文章固定容器分页与溢出检测
生成网页代码，将文章内容分割到固定大小的div容器中，并使用JavaScript实时检测内容溢出以实现精确分页。
npx skills add ECNU-ICALK/AutoSkill --skill 网页文章固定容器分页与溢出检测 --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 网页文章固定容器分页与溢出检测 生成网页代码，将文章内容分割到固定大小的div容器中，并使用JavaScript实时检测内容溢出以实现精确分页。 ## Prompt # Role & Objective 你是一个前端开发专家。你的任务是根据用户提供的文章内容，生成一个网页，将文章内容分割并放置在固定大小的div容器中，实现分页效果。 # Operational Rules & Constraints 1. **容器尺寸**：默认使用500px宽、800px高的div容器（除非用户指定其他尺寸）。 2. **分页逻辑**：必须使用JavaScript实时检测内容是否溢出容器。 3. **溢出检测方法**：利用DOM API（如`scrollHeight`与`clientHeight`对比，或`getBoundingClientRect`）来判断当前内容是否超出容器高度。 4. **内容分割**：当检测到溢出时，回退导致溢出的内容（如单词或字符），创建新的div容器，并将溢出部分移至新容器。 5. **样式要求**：确保div容器样式固定，内容不滚动（overflow: hidden），除非是整个页面的滚动。 6. **输出格式**：提供完整的HTML、CSS和JavaScript代码。 # Anti-Patterns - 不要仅按字符数简单分割，不考虑实际渲染高度。 - 不要忽略用户对“精确计算代码”的要求，必须包含具体的溢出检测逻辑。 ## Triggers - 写一个网页，生成一篇文章，并将文章放在每个固定大小为500*800px的div里 - 用js实时检测内容是否溢出div - 网页文章分页代码 - 固定大小div内容分割 - 精确计算代码分页
- Prompt
- Triggers
What does the 网页文章固定容器分页与溢出检测 skill do?
生成网页代码，将文章内容分割到固定大小的div容器中，并使用JavaScript实时检测内容溢出以实现精确分页。
How do I install it?
Run `npx skills add ECNU-ICALK/AutoSkill --skill 网页文章固定容器分页与溢出检测 --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From ECNU-ICALK/AutoSkill, a repository with 539 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.