用多个语义中立的分隔文本实现分页范围显示，js动态更新各部分textcontent，css用white-space:nowrap等确保对齐与断行，避免aria干扰。
怎么用 HTML + CSS 实现“显示1-10/100项”这类分页范围文本
直接用普通 <span></span> 或 <div> 包裹文字即可，不需要特殊语义标签或 ARIA 属性——浏览器不识别“分页范围”这个概念，它只是纯展示文本。<p>关键在于：动态内容得靠 JS 更新，HTML 本身只负责结构占位。常见错误是试图用 <code><nav></nav> 或 <ol></ol> 套这个文本，反而增加语义混乱。
- 正确写法：
<span class="pagination-info">显示</span><span class="pagination-range">1-10</span><span class="pagination-slash">/</span><span class="pagination-total">100</span><span class="pagination-unit">项</span> - 拆开写多个
<span></span>是为了方便单独样式控制（比如高亮当前范围、加粗总数） - 避免把整个字符串塞进一个
<span></span>，否则后续 JS 更新某一段（如只改“1-10”）就得反复解析字符串
JS 更新分页范围时容易错的三个地方
多数人卡在计算逻辑和 DOM 同步上，不是语法问题，而是边界没想清。
- 起始项 =
(currentPage - 1) * pageSize + 1，但currentPage从 1 开始还是从 0 开始？必须和后端/分页组件对齐，否则显示 1-10 却实际取了第 2 页数据 - 结束项 =
Math.min(currentPage * pageSize, total)，漏掉Math.min就会在最后一页显示 “91-100/100” 变成 “91-110/100” - 更新 DOM 时别用
innerHTML全量重写，优先用textContent改单个<span></span>，避免事件监听器丢失或 XSS 风险
为什么不能用 aria-live 或 role="status" 标注这个文本
因为这不是状态变更通知，而是静态范围提示。屏幕阅读器用户需要的是可预期、可跳过的辅助信息，不是每次翻页都吼一嗓子“显示1-10/100项”。
-
aria-live="polite"会打断当前朗读，尤其在快速翻页时变成噪音 - 如果真要增强可访问性，应该给分页按钮加
aria-label="第2页，共10页"，而不是给范围文本加干扰属性 - 唯一适合加 ARIA 的场景：当总数
total异步加载完成、范围文本首次渲染时，可用一次aria-live="assertive"，但仅限首次
CSS 控制“/”符号对齐和断行问题
斜杠 / 容易在窄屏下被挤到下一行，或者和前后数字不对齐，本质是空格和字体度量不一致导致的。
- 给包含
/的<span></span>加white-space: nowrap，比如包裹/和后面的总数 - 避免用中文全角
／，坚持用 ASCII/，否则字体 fallback 时高度突变 - 如果用 Flex 布局排整体范围文本，别设
flex-wrap: wrap，且给每个子<span></span>设flex-shrink: 0
分页范围文本看着简单，但和 JS 计算、可访问性、响应式排版三者咬合紧密——少一个环节，就会出现“显示对不上实际数据”“手机上看断成两行”“读屏软件念错页码”这类问题。
