带列表的HTML / CSS溢出省略号

Question

我有一大块文本，包括我希望隐藏在省略号溢出中的列表<li> </li>。但是，我意识到，当<li>元素嵌套在<span>中时，我已将溢出和省略属性添加到<li>，它不会适用于{{1}元素！即，列表不会作为溢出隐藏在省略号内，它仍会显示。

这里的解决方法是什么？

Answer 1

您不能在范围内放置<li>元素。 <li>个元素必须直接保留在<ul>标记下。并且，text-overflow不适用于内联元素（范围的默认显示）。对于文本溢出，请尝试：

li {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 40%;
}

<ul>
  <li>Lorem ipsum, dolor sit amet consectetur</li>
  <li>Lorem ipsum, dolor sit consectetur</li>
  <li><span>Loremconsectetur ipsum, dolor sit amet consectetur</span></li>
  <li>Lorem ipsum, consectetur</li>
</ul>