使用多span类设置文本颜色，如何实现换行且消除间距？

方案一：用行内元素实现换行（替代div） #

给每组span包裹一个外层span，通过CSS将其设为块级元素，既能保留span的行内特性，又能实现自动换行，且默认无块级元素的间距问题。

代码示例 #

HTML

<span class="line-group">
  <span class="label">animal : </span>
  <span class="value">tiger,</span>
</span>
<span class="line-group">
  <span class="label">fruit : </span>
  <span class="value">apple,</span>
</span>
<span class="line-group">
  <span class="label">car : </span>
  <span class="value">toyota,</span>
</span>

CSS

.line-group {
  display: block; /* 将行内span转为块级，实现换行 */
  line-height: 1.3; /* 按需调整行高，控制行间距 */
}
.label {
  color: #2c3e50;
}
.value {
  color: #e74c3c;
}

方案二：消除div的默认间距 #

如果已经使用div分组，只需重置div的默认外边距、内边距，并调整行高即可缩小间距。

代码示例 #

HTML

<div class="line-item">
  <span class="label">animal : </span>
  <span class="value">tiger,</span>
</div>
<div class="line-item">
  <span class="label">fruit : </span>
  <span class="value">apple,</span>
</div>
<div class="line-item">
  <span class="label">car : </span>
  <span class="value">toyota,</span>
</div>

CSS

.line-item {
  margin: 0; /* 清除div默认外边距 */
  padding: 0; /* 清除div默认内边距 */
  line-height: 1.3; /* 自定义行高，控制间距大小 */
}
.label {
  color: #2c3e50;
}
.value {
  color: #e74c3c;
}

补充说明 #

• 方案一适合追求语义化、不想使用块级div的场景，外层span仅用于控制换行，不改变内容的行内本质。
• 方案二更适合已基于div开发的项目，只需修改CSS即可快速解决间距问题，无需调整HTML结构。

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