使省略在LI中工作

基础概念

在HTML/CSS中，当需要在列表项(<li>)中实现文本省略效果(即当文本过长时显示省略号"...")，这通常涉及到CSS的文本溢出处理技术。

实现方法

要实现<li>中的文本省略效果，可以使用以下CSS属性组合：

li {
  white-space: nowrap;      /* 禁止文本换行 */
  overflow: hidden;         /* 隐藏溢出内容 */
  text-overflow: ellipsis;  /* 显示省略号 */
  width: 100%;             /* 或指定固定宽度 */
}

详细解释

white-space: nowrap - 确保文本不会换行到下一行
overflow: hidden - 隐藏超出容器边界的内容
text-overflow: ellipsis - 当文本溢出时显示省略号
width - 必须设置一个宽度限制，可以是固定值或百分比

完整示例

<!DOCTYPE html>
<html>
<head>
<style>
ul {
  width: 300px; /* 容器宽度 */
  border: 1px solid #ccc;
  padding: 10px;
}

li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
  list-style-type: none;
  padding: 5px;
  background: #f5f5f5;
}
</style>
</head>
<body>

<ul>
  <li>这是一个很长的列表项内容，当它超出容器宽度时应该显示省略号...</li>
  <li>短项</li>
  <li>另一个非常非常非常非常非常非常非常非常长的列表项</li>
</ul>

</body>
</html>

常见问题及解决方案

问题1：省略号不显示

原因：通常是因为没有设置宽度或高度限制解决：确保设置了宽度属性(width)

问题2：在多行文本中需要省略

解决方案：

li {
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

问题3：在Flex布局中失效

解决方案：

ul {
  display: flex;
  flex-direction: column;
}

li {
  min-width: 0; /* 关键属性 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}