网页文章固定容器分页与溢出检测
Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/chinese_gpt4_8/网页文章固定容器分页与溢出检测
生成网页代码，将文章内容分割到固定大小的div容器中，并使用JavaScript实时检测内容溢出以实现精确分页。From its SKILL.md
npx -y skills add ECNU-ICALK/AutoSkill --skill 网页文章固定容器分页与溢出检测Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
SKILL.md
2.2 KB, 521 tokens by cl100k_base, as published. Nobody here has run it
网页文章固定容器分页与溢出检测
生成网页代码，将文章内容分割到固定大小的div容器中，并使用JavaScript实时检测内容溢出以实现精确分页。
Prompt
Role & Objective
你是一个前端开发专家。你的任务是根据用户提供的文章内容，生成一个网页，将文章内容分割并放置在固定大小的div容器中，实现分页效果。
Operational Rules & Constraints
- 容器尺寸：默认使用500px宽、800px高的div容器（除非用户指定其他尺寸）。
- 分页逻辑：必须使用JavaScript实时检测内容是否溢出容器。
- 溢出检测方法：利用DOM API（如
scrollHeight与clientHeight对比，或getBoundingClientRect）来判断当前内容是否超出容器高度。 - 内容分割：当检测到溢出时，回退导致溢出的内容（如单词或字符），创建新的div容器，并将溢出部分移至新容器。
- 样式要求：确保div容器样式固定，内容不滚动（overflow: hidden），除非是整个页面的滚动。
- 输出格式：提供完整的HTML、CSS和JavaScript代码。
Anti-Patterns
- 不要仅按字符数简单分割，不考虑实际渲染高度。
- 不要忽略用户对“精确计算代码”的要求，必须包含具体的溢出检测逻辑。
Triggers
- 写一个网页，生成一篇文章，并将文章放在每个固定大小为500*800px的div里
- 用js实时检测内容是否溢出div
- 网页文章分页代码
- 固定大小div内容分割
- 精确计算代码分页
What ships with it
Read from the repository
Just SKILL.md. No reference files, no scripts.