如何自动适配<ol>有序列表的数字列宽度？

问题描述 #

<ol> 的数字列采用固定宽度，当数字位数增多时会出现内容被截断的情况：

对应的示例代码如下：

JavaScript 代码 #

document.body.querySelectorAll("ol").forEach((ol, n) => 
{
  ol.start = 1000 ** n - 1;
  for(let i = 0; i < 11; i++)
  {
    const li = document.createElement("li");
    li.textContent = "item " + i;
    ol.appendChild(li);
  }
});

CSS 代码 #

ol:nth-child(4)
{
  /* resize blue list */
  padding-inline-start: 11ch;
}

ol{border:1px solid black;display:inline-block;}
ol:nth-child(1){background-color:lightgreen;}
ol:nth-child(2){background-color:beige;}
ol:nth-child(3){background-color:pink;}
ol:nth-child(4){background-color:lightblue;}

HTML 代码 #

<ol>default</ol>
<ol>default</ol>
<ol>default</ol>
<ol>resized</ol>

已知最大数字长度时，可以手动设置padding-inline-start（如示例中的蓝色列表），但有没有办法实现自动适配？此前的相关解决方案需要硬编码值，无法满足自动适配的需求。

解决方案 #

可以通过自定义CSS计数器实现数字列宽度的自动适配，核心思路是放弃浏览器默认的列表编号渲染，改用计数器生成编号并通过内联元素特性自动适配宽度：

实现代码 #

ol {
  border: 1px solid black;
  display: inline-block;
  /* 移除默认内边距和列表样式 */
  padding-inline-start: 0;
  list-style: none;
  /* 初始化计数器 */
  counter-reset: list-counter;
}

ol li {
  /* 自增计数器 */
  counter-increment: list-counter;
  /* 预留编号与内容的间距 */
  padding-inline-start: 1.5em;
  position: relative;
}

/* 生成自定义编号 */
ol li::before {
  content: counter(list-counter) ".";
  position: absolute;
  left: 0;
  /* 让编号右对齐，保证视觉对齐一致 */
  text-align: right;
  /* 自动适配数字宽度 */
  width: max-content;
  margin-right: 0.5em;
}

/* 保留示例背景色样式 */
ol:nth-child(1){background-color:lightgreen;}
ol:nth-child(2){background-color:beige;}
ol:nth-child(3){background-color:pink;}
ol:nth-child(4){background-color:lightblue;}

原理说明 #

1. 移除<ol>默认的list-style和padding-inline-start，改用CSS计数器控制编号生成。
2. 通过::before伪元素生成编号，width: max-content让元素宽度自动适配当前数字的位数。
3. 利用绝对定位和右对齐属性，确保不同位数的编号都能和列表内容保持统一的对齐效果，避免内容偏移。

如果需要支持自定义start属性，可以通过CSS变量动态传递起始值：

ol {
  counter-reset: list-counter var(--list-start, 0);
}

在HTML中使用时：

<ol style="--list-start: 999">
  <li>item 1</li>
  <li>item 2</li>
</ol>

内容的提问来源于stack exchange，提问作者vanowm