我来帮你搞定这个问题～你遇到的情况是因为用了list-style-position:inside，这个属性会把数字序号塞进li的内容盒子里，和文本共用一个容器。当你给li加overflow:hidden时，整个盒子里超出宽度的部分都会被藏起来，序号自然就跟着没了。下面给你两种靠谱的解决办法：

方法一：改用list-style-position:outside + 内边距调整 #

这个方法最简单，利用默认的序号位置（outside），通过内边距让文本和序号对齐，这样序号在li的外面，overflow:hidden只会作用于文本内容：

.wrapper{width:300px; background-color:#ccc; padding:10px;}
/* 修复后的样式 */
.ol-fixed li {
  list-style-position: outside; /* 序号放在li外面 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 1em; /* 给文本左边加内边距，和序号对齐 */
}
ol {
  margin-left: 1em; /* 确保序号有足够的显示空间 */
}

方法二：用CSS计数器自定义序号 #

如果需要更灵活的样式控制，比如自定义序号的颜色、大小，可以用CSS计数器来实现，把序号和文本完全分开：

.wrapper{width:300px; background-color:#ccc; padding:10px;}
/* 修复后的样式 */
.ol-counter {
  counter-reset: li; /* 初始化计数器 */
  padding-left: 0; /* 去掉ol默认的左内边距 */
}
.ol-counter li {
  position: relative;
  list-style: none; /* 隐藏默认序号 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 1.5em; /* 给自定义序号留出位置 */
}
.ol-counter li::before {
  counter-increment: li; /* 计数器自增 */
  content: counter(li) "."; /* 生成序号文本 */
  position: absolute;
  left: 0; /* 把序号固定在li左侧 */
  /* 这里还可以加自定义样式，比如：color: #ff0000; font-weight: bold; */
}

这两种方法都能实现文本溢出省略的同时，保留清晰可见的数字序号，你可以根据自己的需求选一种～

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