我正在尝试制作一个有序的链接列表,但遇到了一些问题,当使用 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/
最佳答案
这里有一个解决丢失号码问题的技巧
边注:
li
显示为list-item
,当更改为inline-block
时,列表样式消失CSS counters可能是另一种方法
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;
}
<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>
关于html - 显示 : inline-block; and text-overflow: ellipsis; 的有序列表中的列表项未显示数字,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37760433/