html– 带有文本椭圆的编号列表也隐藏了订单号

我正在使用文本椭圆的ol列表,但是当我添加overflow：hIDden;属性它也隐藏数字顺序.

我如何使用文本椭圆并保持数字可见

CodePen

.wrapper{wIDth:300px; background-color:#ccc; padding:10px;}.tab-ol li { List-style-position:insIDe;  white-space: nowrap;  overflow: visible;  text-overflow: ellipsis;  }.ol-2 li{  List-style-position:insIDe;  white-space: nowrap;  overflow: hIDden ;  text-overflow: ellipsis;  }ol {	counter-reset:li; /* Initiate a counter */	margin-left:0; /* Remove the default left margin */	padding-left:0; /* Remove the default left padding */}ol > li {	position:relative; /* Create a positioning context */	margin:0 0 6px 2em; /* Give each List item a left margin to make room for the numbers */	padding:4px 8px; /* Add some spacing around the content */	List-style:none; /* disable the normal item numbering */	border-top:0px solID #666;	background:#f6f6f6;}ol > li:before {	content:counter(li); /* Use the counter as content */	counter-increment:li; /* Increment the counter by 1 */	/* position and style the number */	position:absolute;	top:-2px;	left:-2em;	-moz-Box-sizing:border-Box;	-webkit-Box-sizing:border-Box;	Box-sizing:border-Box;	wIDth:2em;	/* Some space between the number and the content in browsers that support	   generated content but not positioning it (Camino 2 is one example) */	margin-right:8px;	padding:4px;	border-top:0px solID #666;	color:#fff;	background:#666;	Font-weight:bold;	/* Font-family:"Helvetica Neue",Arial,sans-serif; */	text-align:center;}li ol,li ul {margin-top:6px;}ol ol li:last-child {margin-bottom:0;}

.wrapper {  wIDth: 300px;  background-color: #ccc;  padding: 10px;}.tab-ol li {  List-style-position: insIDe;  white-space: nowrap;  overflow: hIDden;  text-overflow: ellipsis;}ol {  counter-reset: li;  margin-left: 0;  padding-left: 0;}ol>li {  position: relative;  margin: 0 0 6px 0;/*remove the margin here*/  padding: 4px 8px 4px 2.1em;/* Add the padding here*/  List-style: none;  border-top: 0px solID #666;  background: #f6f6f6;}ol>li:before {  content: counter(li);  counter-increment: li;  position: absolute;  top: 0;  left: 0;/*adjust the new position*/  Box-sizing: border-Box;  wIDth: 2em;  padding: 4px;  border-top: 0px solID #666;  color: #fff;  background: #666;  Font-weight: bold;  text-align: center;}li ol,li ul {  margin-top: 6px;}ol ol li:last-child {  margin-bottom: 0;}