[分享]css两个span怎么换行

在 CSS 中，使用 whitespace 属性可以控制文字是否自动换行。默认情况下，浏览器会在单词之间自动换行，也就是说，如果一行不够放下一个单词，单词会自动跳到下一行。 但是，有些时候我们需要手动...

在 CSS 中，使用 white-space 属性可以控制文字是否自动换行。默认情况下，浏览器会在单词之间自动换行，也就是说，如果一行不够放下一个单词，单词会自动跳到下一行。
但是，有些时候我们需要手动控制文字的换行，比如在一个 span 中包含了两个文字，但是我们希望这两个文字分别在两行显示，此时应该怎么做呢？
有两种常见的方法可以实现这个效果：
1. 使用 display:block 属性
可以将 span 标签的 display 属性设置为 block，这样 span 就会被视为一个块级元素，与其他元素一样有自己的 width 和 height。

<p>
  <span style="display:block">第一个文字</span>
  <span style="display:block">第二个文字</span>
</p>

这样，第一个文字和第二个文字就会分别显示在两行了。
2. 使用 br 标签
既然我们希望两个文字分别在两行显示，那么可以在两个文字之间插入一个 br 标签，表示换行。

<p>
  <span>第一个文字</span><br>
  <span>第二个文字</span>
</p>

使用 br 标签的方法比较简单，但是会使 HTML 结构变得复杂，而使用 display:block 属性则可以更加简洁明了。
以上两种方法都可以实现 span 换行的效果，具体使用哪种方法取决于你的实际需求。