Les feuilles de style CSS text-overflow: ellipsis causes <li>'nombre de disparaître

Je suis actuellement à l'aide de points de suspension pour tronquer une commande de la liste des éléments qui sont plus d'une ligne. Cependant, le li qui sont trop longues et nécessitent des points de suspension automatiquement le nombre sur la gauche supprimé. Est-il un moyen pour éviter cela?

Sans le css, la liste des articles de nombres.

<style>    
#test li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    
}
</style>

<ol id="test" style="width:100px;">
    <li>test1</li>
    <li>test1</li>
    <li>toooooooooooooooooo loooooooooooooooooonnnnnnnnnnnnnnggggggg</li>
    <li>test1</li>
    <li>test1</li>
    <li>test1</li>
</ol>
N'utilisez pas la largeur ou de l'utilisation width:auto si vous voulez montrer à tous. Vous avez défini largeur fixe, si le texte dépasse la largeur sera caché.
Mais sans une largeur comment puis-je obtenir les points de suspension apparaissent?

OriginalL'auteur CHawk | 2012-02-29

  1. 34

    Style de liste une Position par défaut à l'Extérieur. Changement à l'intérieur et les numéros devraient apparaître.

    <style>    
#test li {
  list-style-position:inside;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    
}
</style>
    Ok, cela fonctionne. Mais ol { list-style-position:inside; }
    Aussi ul {margin-left: -10px;} pour compenser le déplacement vers la droite.

    OriginalL'auteur mcnarya

  2. 7

    Essayez d'utiliser list-style-position: inside; pour la ol

    #test {
   list-style-position: inside;
}

    DÉMO

    OriginalL'auteur Selvakumar Arumugam