リスト項目および保留番号のテキストオーバーフロー省略記号

Question

Thisは、この問題のスピンオフです。私は与えられた答えに示されている技術を使用していますが、私は私が持っているHTML/CSSで、ol liの先頭に番号を保持したい：

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>

番号は（1 。、2.、3.など）はもはや見えません。

Answer 1

表示ブロックが表示から数字を妨げています。 list-style-position：insideを配置します。 li要素

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>

Answer 2

LIはdefautによって表示されません。あなたはblockからliをリセットする場合は、このdisplay値は数字や円、正方形を生成し、...

は、その後、表示するもうlist-itemはありません。

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>