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/
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>
This JSFiddle produced rows of 4, keeping them numbered.
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;
}
Use this CSS:
ol{
padding: 20px;
list-style-type:decimal;
}
ol li {
float:left;
margin: 0 10px;
padding: 0 10px;
}
change width:some_value%
to get number of links in a row.
check this one.
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;
}
ol li {
margin: 3px 12px 3px 12px;
width: 200px;
float:left;
}
ol{list-style-type: decimal;}
plunker url for reference- https://jsfiddle.net/Nagasai_Aytha/3hebtbvz/7/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.