Murphy1976 Murphy1976 - 5 months ago 26
CSS Question

Text overflow Ellipsis for a Float OL LI Left - BUT retain the Numbers

This is a spinoff of THIS issue: http://stackoverflow.com/questions/7678728/setting-text-overflow-ellipsis-for-a-float-left-div-or-list#=

I am using the technique illustrated in the answers given, but I wish to retain the numbers at the beginning of the OL LI, with the CSS I have:



ol.songlist > li {
width: 50%;
float: left;
padding: 10px 0;
display: block;
}
.songlist > li > a {
width: 125px;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

<ol class="songlist">
<li><a href="linktoURL">Song Title</a>
</li>
<li><a href="linktoURL">Song Title</a>
</li>
<li><a href="linktoURL">Song Title</a>
</li>
<li><a href="linktoURL">Song Title</a>
</li>
<li><a href="linktoURL">Song Title</a>
</li>
</ol>





the numbers (1., 2., 3., etc.) are not longer visible

Answer

The display block is preventing the numbers from showing. Place the list-style-position: inside; on the li element

ol.songlist > li {
    width: 50%;
    float: left;
    padding: 10px 0;
   list-style-position:inside;       
}

.songlist > li > a {
   width: 125px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
<ol class="songlist">
   <li><a href="linktoURL">Song Title</a></li>
   <li><a href="linktoURL">Song Title</a></li>
   <li><a href="linktoURL">Song Title</a></li>
   <li><a href="linktoURL">Song Title</a></li>
   <li><a href="linktoURL">Song Title</a></li>
</ol>