应使用CSS计数器+表格布局：.custom-ol设list-style: none和counter-reset，li设display: table-row，::before伪元素用display: table-cell和width: 1px生成自适应宽度序号，文本自然流式换行对齐。
ol列表项文本溢出导致布局错位
直接给<ol></ol>加width或max-width没用，因为<li>默认是块级元素，内部文本会撑开容器、挤压相邻元素（比如复选框、按钮），甚至横向溢出。常见表现是序号被截断、多行文本首行缩进异常、右侧内容被挤出视口。
- 别碰
padding-inline-start后只加padding-left——这会让序号和文本错位，尤其在IE或旧版Safari里更明显 - 避免用
white-space: nowrap强行单行——它会破坏可读性，且跟text-overflow: ellipsis配合时必须同时满足width、overflow: hidden、white-space: nowrap三者，而<li>里通常无法稳定控制宽度 - 优先保留语义：不要为排版把
<ol></ol>改成<div>套<code><span></span>，否则屏幕阅读器读不出序号，SEO也丢掉结构化信息用CSS计数器+表格布局自动适配长序号
这是目前唯一能兼顾任意长度序号（比如
start="99999"）、不改HTML、不破坏可访问性的方案。核心是让序号和文本成为两个独立的“列”，由表格机制自动分配最小宽度。-
.custom-ol设counter-reset和list-style: none，关掉原生序号 -
.custom-ol li设display: table-row，触发表格行为 -
::before伪元素生成序号，display: table-cell+width: 1px——这个1px不是固定宽，而是告诉浏览器“按内容最小撑开”，10、1000、100000都刚好 - 文本部分自然流式排列，换行对齐不受序号位数影响
单行截断显示省略号（仅限明确宽度场景）
如果业务确定每项最多显示一行，且容器宽度可控（比如固定
300px宽的侧边栏列表），可以用text-overflow: ellipsis，但必须严格满足三个条件：
htmlppt.skill下载把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
-
width或max-width有明确值（百分比也行，但不能是auto） -
white-space: nowrap——强制不换行，否则省略号不触发 -
overflow: hidden——visible或scroll都会让省略号失效 - 注意：
title属性可补提示，但iOS Safari不支持悬停，别依赖它作为唯一方案
超长纯文本内容自动折行（保留用户换行符）
当
<li>里塞的是用户提交的带回车的文本（比如日志、评论），不能简单用white-space: normal——它会把原始换行符当空格吃掉；也不能用pre——它不折行，长段落横向溢出。立即学习“前端免费学习笔记（深入）”；
- 唯一正确解是
white-space: pre-wrap：保留所有\n、\t和空格，同时允许在右边界自动折行 - 必须搭配
word-break: break-word或overflow-wrap: break-word处理超长无空格串（如URL、Base64） - 禁用
text-overflow: ellipsis——pre-wrap不支持省略号，加了也无效 - 不需要额外包裹
<p></p>或<div>，直接写在<code><li>上即可 复杂点在于：同一份<ol></ol>里可能混合多种内容类型——有的要单行省略，有的要多行保留换行，有的序号极长。这时候不能靠一套CSS通吃，得按class分层控制，或者用JS动态判断内容特征再打标记。容易被忽略的是，移动端小屏下width: 1px的表格列依然可靠，但text-overflow方案的固定width必须配合max-width: 100%和box-sizing: border-box，否则在不同DPR设备上会错位。
-
