应使用CSS计数器+表格布局：.custom-ol设list-style: none和counter-reset，li设display: table-row，::before伪元素用display: table-cell和width: 1px生成自适应宽度序号，文本自然流式换行对齐。

ol列表项文本溢出导致布局错位

直接给

加width或max-width没用，因为

默认是块级元素，内部文本会撑开容器、挤压相邻元素（比如复选框、按钮），甚至横向溢出。常见表现是序号被截断、多行文本首行缩进异常、右侧内容被挤出视口。

• 别碰padding-inline-start后只加padding-left——这会让序号和文本错位，尤其在IE或旧版Safari里更明显
• 避免用white-space: nowrap强行单行——它会破坏可读性，且跟text-overflow: ellipsis配合时必须同时满足width、overflow: hidden、white-space: nowrap三者，而
• 里通常无法稳定控制宽度
• 优先保留语义：不要为排版把
  改成
  套，否则屏幕阅读器读不出序号，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不支持悬停，别依赖它作为唯一方案

  超长纯文本内容自动折行（保留用户换行符）

  当

• 里塞的是用户提交的带回车的文本（比如日志、评论），不能简单用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不支持省略号，加了也无效
  • 不需要额外包裹
    或
    ，直接写在
  • 上即可

    复杂点在于：同一份

    里可能混合多种内容类型——有的要单行省略，有的要多行保留换行，有的序号极长。这时候不能靠一套CSS通吃，得按class分层控制，或者用JS动态判断内容特征再打标记。容易被忽略的是，移动端小屏下width: 1px的表格列依然可靠，但text-overflow方案的固定width必须配合max-width: 100%和box-sizing: border-box，否则在不同DPR设备上会错位。