未显示带有显示的有序列表中的列表项的数字：inline-block;和文本溢出：省略号;

Question

我正在尝试制作一个有序的链接列表，但面临一些问题，使用display时不显示包含列表项的数字：inline-block;和文本溢出：省略号;

我有HTML

<ol>
    <li><a href="One">Link One One One One One One One One</a></li>
    <li><a href="Two">Link Two Two Two Two Two Two Two Two</a></li>
    <li><a href="Three">Link Three Three Three Three Three Three</a></li>
    <li><a href="Four">Link Four Four Four Four Four Four Four</a></li>
    <li><a href="Five">Link Five Five Five Five Five Five Five Five</a></li>
    <li><a href="Six">Link Six Six Six Six Six Six Six Six Six Six</a></li>
    <li><a href="Seven">Link Seven Seven Seven Seven Seven Seven Seven</a></li>
    <li><a href="Eight">Link Eight Eight Eight Eight Eight Eight Eight Eight</a></li>
    <li><a href="Nine">Link Nine Nine Nine Nine Nine Nine Nine Nine</a></li>
    <li><a href="Ten">Link Ten Ten Ten Ten Ten Ten Ten Ten Ten Ten</a></li>
</ol>

和css

ol li {
  display: inline-block;
  margin: 3px 12px 3px 12px;
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

JSfiddle是https://jsfiddle.net/3hebtbvz/

我需要这样的东西

Answer 1

这是一个解决丢失号码问题的技巧

附注：

• li显示为list-item，当更改为inline-block时，列表样式消失

• CSS counters可能是另一种方法

＆＃13;

＆＃13;

ol li {
  float: left;
  width: 200px;
  margin-right: 30px;
}
ol li a {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

＆＃13;

<ol>
	<li><a href="One">Link One One One One One One One One</a></li>
	<li><a href="Two">Link Two Two Two Two Two Two Two Two</a></li>
	<li><a href="Three">Link Three Three Three Three Three Three</a></li>
	<li><a href="Four">Link Four Four Four Four Four Four Four</a></li>
	<li><a href="Five">Link Five Five Five Five Five Five Five Five</a></li>
	<li><a href="Six">Link Six Six Six Six Six Six Six Six Six Six</a></li>
	<li><a href="Seven">Link Seven Seven Seven Seven Seven Seven Seven</a></li>
	<li><a href="Eight">Link Eight Eight Eight Eight Eight Eight Eight Eight</a></li>
	<li><a href="Nine">Link Nine Nine Nine Nine Nine Nine Nine Nine</a></li>
	<li><a href="Ten">Link Ten Ten Ten Ten Ten Ten Ten Ten Ten Ten</a></li>
</ol>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这个JSFiddle生成了4行，保持编号。

ol li {
  float: left;
  width: 130px;
  margin-right: 15px;
}
ol li a {
  display: inline-block;
  vertical-align: top;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Answer 3

使用此CSS：

ol{
padding: 20px; 
    list-style-type:decimal;

}
ol li {
float:left;
margin: 0 10px;
padding: 0 10px;
}

更改width:some_value%以获取连续数量的链接。

{{3}}

Answer 4

检查一下。

https://jsfiddle.net/r29su84z/

ol li {
float: left;
width: 100px;
padding: 12px;
}

ol li a {
display: inline-block;
vertical-align: top;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;  
}

Answer 5

            ol li {
              margin: 3px 12px 3px 12px;
              width: 200px;
              float:left;


            }

            ol{list-style-type: decimal;}

plunker url供参考 - https://jsfiddle.net/Nagasai_Aytha/3hebtbvz/7/