页码器错乱主因是 flex 项未设 flex-shrink: 0 且宽度控制失当；应改用 flex: 0 0 auto，为省略号加 white-space: nowrap 和统一排版属性，动态计算可见页码数，并严格补全 aria-current、aria-label 等可访问性属性。
flex-wrap 为什么会让页码数字挤成一团
页码器数字长度不一（比如“1”和“999”），用 display: flex 默认会把所有 li 当作等宽容器处理，flex-wrap: wrap 又不会主动收缩单个数字项的宽度，结果就是小屏下数字重叠或换行错乱。
- 根本原因是没设
flex-shrink: 0—— 数字项默认允许压缩，但数字文本无法缩放，只能溢出或折行 - 别给页码项设固定
width或min-width，否则“100”会被截断，“…”，而“5”又留大片空白 - 用
flex: 0 0 auto替代flex: 1，确保每个数字按内容撑开，不抢空间也不被压扁
如何让省略号“…”和数字对齐且不换行
… 是纯文本，不是图标，它和数字字号、行高、letter-spacing 都有关联；一旦父容器 justify-content: space-between，它就容易被挤到下一行或贴边失衡。
- 把
…包进<span class="ellipsis"></span>，并设white-space: nowrap，防止断在中间 - 所有页码项（含
…）统一设line-height: 1.5和font-variant-numeric: tabular-nums，让“1”和“100”基线一致 - 避免对整个页码容器用
text-align: center，该用justify-content: center配合flex子项的margin微调间距
响应式断点怎么选才不卡顿
页码器不是图片，不能靠媒体查询粗暴隐藏；数字越多，越要提前控制可见数量，否则小屏加载 50 个 li 会卡顿，还影响可访问性。
- 用 JavaScript 动态计算可视页码数：取
Math.min(7, Math.floor(containerWidth / avgDigitWidth))，而不是写死@media (max-width: 480px) - CSS 里只做兜底：比如
@media (max-width: 320px)时强制最多显示 5 项 + 省略号，避免极端窄屏渲染失控 - 别用
visibility: hidden隐藏页码项——DOM 还在，仍参与 layout 计算；改用display: none或直接从 DOM 移除
aria-label 和键盘焦点容易漏掉哪几处
页码器是交互控件，但很多人只加了 role="navigation" 就以为完事，实际焦点跳转、朗读逻辑全崩。
立即学习“前端免费学习笔记（深入）”；
- 每个页码
a必须有aria-label="跳转到第 3 页"，不能只靠链接文字“3”——屏幕阅读器可能读成“链接 3”，用户不知道这是页码 - 当前页码项要用
aria-current="page"，而非仅靠 CSS 类名.active，否则 AT（辅助技术）无法识别状态 - 禁用态（如“上一页”不可点）必须用
aria-disabled="true"+tabindex="-1"，否则键盘用户仍能聚焦却无法触发
最麻烦的其实是“动态插入省略号后，焦点顺序错乱”——得确保 DOM 插入位置和视觉顺序严格一致，不然键盘用户 tab 一下就跳飞了。
