使用jQuery和Bootstrap开发的待办事项列表文本重叠问题求助

嘿，这个问题我之前也碰到过！核心原因就是你给<li>设置了固定的height:40px和line-height:40px——当文本超过一行时，容器高度不够，多余的内容就会溢出到下一个列表项上面了。下面给你几个实用的解决方案：

方案1：移除固定高度，让列表项自适应内容 #

直接去掉height属性，调整行高让多行文本排版更舒服，再加点内边距保持垂直间距：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  background: white;
  /* 移除固定height，让li根据内容自动增高 */
  /* height: 40px; */
  line-height: 1.5; /* 设置合适的行高，多行文本不会挤在一起 */
  color: #666;
  padding: 8px 0; /* 上下内边距，保持类似原来的垂直空间感 */
}

这样不管文本是一行还是多行，列表项都会自动调整高度，不会出现重叠。

方案2：用min-height保证最小高度，同时支持自适应 #

如果想保持单行时的40px高度，又要兼容多行内容，可以把height换成min-height，再用flex布局让文本垂直对齐更合理：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  background: white;
  min-height: 40px; /* 单行时保持40px高度，内容多了自动扩展 */
  line-height: 1.5;
  color: #666;
  padding: 8px 0;
  display: flex;
  align-items: center; /* 单行文本垂直居中，多行也能正常排列 */
}

方案3：利用Bootstrap内置组件简化开发 #

既然你用了Bootstrap，完全可以用它的list-group组件，自带了自适应高度和良好的排版，不用自己写基础样式：

<ul class="list-group">
  <li class="list-group-item">这是一行很长的待办文本，超过一行后会自动换行，不会和下面的列表项重叠</li>
  <li class="list-group-item">另一个待办事项</li>
</ul>

如果需要自定义颜色，只需要覆盖样式：

.list-group-item {
  color: #666;
}

Bootstrap的组件已经帮你处理了响应式和内容自适应的问题，能省不少调试时间。

总的来说，关键就是不要给列表项设置固定高度，让容器能根据内容自动调整，再配合合适的行高和内边距，就能完美解决文本重叠的问题啦！

内容的提问来源于stack exchange，提问作者nCardot