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

Question

我有一大段文字，包括一个列表 <li> </li>我想隐藏在省略号溢出中。但是，我意识到当 <li>元素嵌套在 <span> 中我为其添加了 overflow 和 ellipses 属性，它不适用于 <li>元素!即，列表不会因为溢出而隐藏在省略号内，它仍然会显示。

这里有什么解决方法？

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>