阅读更多：CSS 教程

什么是text-overflow属性？

CSS的text-overflow属性用于控制当文本内容超出容器宽度时的溢出效果。它可以在文本溢出时展示省略号（…），从而提供更好的用户体验。

text-overflow: ellipsis 的问题

当我们在

下面是一个例子来演示这个问题：

<ul>
  <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li>Phasellus eleifend quam sed erat interdum consequat.</li>
  <li>Curabitur vehicula ipsum eget neque consequat faucibus.</li>
</ul>

我们给

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

结果发现，虽然文本溢出效果正常，但是编号却消失了。

解决编号消失的问题

要解决这个问题，我们可以使用伪元素(::before)来模拟列表项的编号。这样即使text-overflow属性裁剪了文本内容，列表项的编号仍然存在，避免了编号消失的问题。

首先，给

<ul>
  <li data-index="1">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
  <li data-index="2">Phasellus eleifend quam sed erat interdum consequat.</li>
  <li data-index="3">Curabitur vehicula ipsum eget neque consequat faucibus.</li>
</ul>

然后，在CSS中使用伪元素来为每个列表项添加编号：

li::before {
  content: attr(data-index) ". ";
}

通过上述代码，我们使用attr()函数获取了”index”属性的值，并在伪元素中显示出来。这样即使列表项被裁剪，编号依然存在。

总结

通过本文，我们了解了CSS中text-overflow属性的概念以及在应用于

总结起来，当我们需要使用text-overflow: ellipsis属性时，并且需要保留