Text Überlauf Ellipse für Listenelemente und behalten Sie Zahlen

Question

This ist eine Ausgründung dieses Problems. Ich bin die Technik in den Antworten dargestellt unter Verwendung gegeben, aber ich mag die Zahlen am Anfang der ol li, mit der HTML/CSS Ich habe behalten:

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>

Die Zahlen (1 ., 2., 3. usw.) sind nicht mehr sichtbar

Answer 1

Der Anzeigeblock aus, welche die Zahlen verhindert. Platziere die Listen-Stil-Position: inside; auf dem li-Element war

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 ist display:list-item; von defaut. Dieser display Wert erzeugt die Zahlen oder Kreis, Quadrat, ...

Wenn Sie li-block zurückgesetzt, dann gibt es nicht mehr list-item zu zeigen.

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>