web-dev-qa-db-ja.com

CSS-テキストオーバーフロー：省略記号により<li>の番号が消えます

現在、Ellipsisを使用して、1行を超える長さの注文リストのアイテムを切り捨てています。ただし、長すぎて省略記号が必要なliは、左側の数字が自動的に削除されます。これを防ぐ方法はありますか？

Cssがない場合、list-itemsには番号があります。

<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>
csslisthtml-listsellipsis
19
CHawk

リストスタイルの位置のデフォルトは外側です。内部に変更すると、数字が表示されます。

<style>    
#test li {
  list-style-position:inside;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: Ellipsis;    
}
</style>
36
mcnarya

olにlist-style-position: inside;を使用してみてください

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

[〜＃〜]デモ[〜＃〜]

7
Selvakumar Arumugam