CSS Li项上显示两行文字，第二行没有间距

在本文中，我们将介绍如何使用CSS来显示一个Li项上的两行文字，并且第二行的文字没有间距。

阅读更多：CSS 教程

CSS浮动属性

要实现Li项上显示两行文字，我们可以使用CSS中的浮动属性。通过将Li项中的文字进行分割，然后设置第一行为浮动，第二行为非浮动，我们可以实现这个效果。

下面是一个例子：

<ul>
  <li>
    <div class="first-line">第一行文字</div>
    <div class="second-line">第二行文字没有间距</div>
  </li>
</ul>

ul {
  list-style: none;
}

.first-line {
  float: left;
}

.second-line {
  margin-left: 0;
}

在上面的例子中，我们使用了一个包含两个div的Li项。第一个div代表第一行文字，第二个div代表第二行文字。

通过给第一行文字设置浮动属性，我们可以让第二行文字紧跟在第一行文字的后面。然后，通过给第二行文字设置margin-left: 0，我们可以让第二行文字没有间距。

CSS Flex布局

除了使用浮动属性，我们还可以使用CSS中的Flex布局来实现Li项上两行文字的效果。Flex布局提供了更简单且灵活的方法来实现我们想要的布局效果。

下面是一个使用Flex布局的例子：

<ul class="flex-container">
  <li>
    <div class="first-line">第一行文字</div>
    <div class="second-line">第二行文字没有间距</div>
  </li>
</ul>

ul.flex-container {
  display: flex;
  flex-wrap: wrap;
}

li {
  flex-basis: 100%;
}

.first-line {
  flex-basis: 100%;
}

.second-line {
  margin-top: 0;
}

在上面的例子中，我们使用了一个包含两个div的Li项，和一个具有flex-container类的ul元素。

通过给ul元素设置display: flex，我们可以启用Flex布局。然后，通过给li元素设置flex-basis: 100%，我们可以让li元素占满整个父容器的宽度。

接着，给第一行文字的div设置flex-basis: 100%，我们可以让它占满整个li元素的宽度。最后，通过给第二行文字的div设置margin-top: 0，我们可以让第二行文字没有间距。

总结

在本文中，我们介绍了两种方法来实现Li项上显示两行文字，其中第二行文字没有间距的效果。

通过使用浮动属性，我们可以将文字分为两个div，并让第一行文字浮动，第二行文字没有间距。另外，使用Flex布局也可以实现相同的效果，而且更加灵活。

无论是使用浮动属性还是Flex布局，都可以根据具体的需求来选择适合自己的方法来实现Li项上显示两行文字的效果。希望本文对你有所帮助！