Syed Syed - 5 months ago 11
CSS Question

Numbers not showing with list items in ordered list with display: inline-block; and text-overflow: ellipsis;

I am trying to make an ordered list of links but facing some problems, it is not showing numbers with list items when using display: inline-block; and text-overflow: ellipsis;

I have 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>


and css

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


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

I need something like this
enter image description here

Answer

Here is a trick solving the lost number issue

Side notes:

  • A li is displayed as a list-item and when altered to inline-block the list style disappears

  • CSS counters could be another approach

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>

Comments