23

我目前正在使用省略号来截断超过一行长度的订单列表项目。但是，太长且需要省略号的 li 会自动删除左侧的数字。有没有办法防止这种情况发生？

如果没有 css，列表项就会有数字。

<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>
4

2 回答 2

45

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

<style>    
#test li {
  list-style-position:inside;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;    
}
</style>
于 2012-02-29T22:34:45.033 回答
7

尝试list-style-position: inside;使用ol

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

演示

于 2012-02-29T22:39:48.820 回答