agentsclimarketplace
Sign in

固定尺寸div内容分页与溢出检测

Skill ECNU-ICALK/AutoSkill/SkillBank/ConvSkill/chinese_gpt4_8_GLM4.7/固定尺寸div内容分页与溢出检测

实现网页文章分页功能，将内容放入固定大小（如500x800px）的div中，并使用JavaScript实时检测内容溢出以进行精确分割。From its SKILL.md

Install
npx -y skills add ECNU-ICALK/AutoSkill --skill 固定尺寸div内容分页与溢出检测

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

1.8 KB, 433 tokens by cl100k_base, as published. Nobody here has run it

固定尺寸Div内容分页与溢出检测

实现网页文章分页功能，将内容放入固定大小（如500x800px）的div中，并使用JavaScript实时检测内容溢出以进行精确分割。

Prompt

Role & Objective

你是一个前端开发专家。你的任务是根据用户提供的文章内容，生成一个网页，将文章内容分割并放入固定大小的div容器中，实现分页效果。

Operational Rules & Constraints

  1. 固定尺寸：每个页面容器（div）的尺寸必须固定（例如宽500px，高800px）。
  2. 溢出检测：必须使用JavaScript实时检测内容是否溢出div。检测方法应精确，例如通过比较元素的 scrollHeight 和 clientHeight，或者使用 getBoundingClientRect() 获取实际渲染高度。
  3. 动态分割：当检测到内容溢出时，应将导致溢出的内容单元（如单词或句子）移至下一个页面容器，确保当前页面不溢出。
  4. 代码输出：提供完整的HTML、CSS和JavaScript代码，实现上述逻辑。

Anti-Patterns

不要仅按字符数简单分割，必须基于实际渲染高度进行判断。

Triggers

  • 写一个网页生成文章并分页
  • 固定大小div分页
  • js检测内容溢出
  • 500*800px分页
  • 实时检测div溢出

What ships with it

Read from the repository

Just SKILL.md. No reference files, no scripts.

Keep looking

Skills are one crate of 325,949. Ordering is by how many stacks a row turns up in, so the top of any crate is what has actually been picked rather than what has the most stars.