CSS - 文本溢出：省略号导致 <li> 的数字消失
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9507555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS - text-overflow: ellipsis causes <li>'s number to disappear
提问by CHawk
I'm currently using ellipsis to truncate an order list's items which are more than one line long. However, the li's that are too long and require an ellipsis automatically have the number on the left removed. Is there a way to prevent this from happening?
我目前正在使用省略号来截断长度超过一行的订单列表的项目。但是，太长且需要省略号的 li 会自动删除左侧的数字。有没有办法防止这种情况发生？
Without the css, the list-items have numbers.
没有 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>
回答by mcnarya
List style Position defaults to Outside. Change to inside and the numbers should appear.
列表样式位置默认为外部。更改为内部，数字应出现。
<style>
#test li {
list-style-position:inside;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
