大佬教程收集整理的这篇文章主要介绍了html – 带有文本椭圆的编号列表也隐藏了订单号，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在使用文本椭圆的ol列表,但是当我添加overflow：hidden;属性它也隐藏数字顺序.
我如何使用文本椭圆并保持数字可见
.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;}number one for this monthnumber one for this monthnumber one for this monthnumber one for this monthnumbERnumber one for this monthnumber one for this monthnumber one for this monthnumber one for this month
最佳答案
用padding替换margin并在li里面输入数字：
.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;
}
number one for this monthnumber one for this monthnumber one for this monthnumber one for this month
大佬总结
以上是大佬教程为你收集整理的html – 带有文本椭圆的编号列表也隐藏了订单号全部内容，希望文章能够帮你解决html – 带有文本椭圆的编号列表也隐藏了订单号所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。