Question

我目前正在使用省略号来截断多个行长的订单列表。但是，太长并且需要省略号的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>

Answer 1

列表样式位置默认为外部。更改为内部，应显示数字。

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

Answer 2

尝试将list-style-position: inside;用于ol

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

DEMO

CSS - 文本溢出：省略号导致<li>的数字消失</li>

2 个答案: