如何将多个<span>标签包裹在<div>标签中

Question

我有一个硬编码宽度的 <div>。在这个 <div> 中有几百个 <span> 标签。我能否包装这些 <span>，以便行间距正确，并且换行在 <span> 之间进行？我使用了 word-wrap: break-word，但看起来很混乱。

以下是伪代码。

span {
  margin: 2px;
  border: 1px dotted #cccccc;
  padding: 4px 10px 4px 10px; 
    }
div {
  padding: 5px;
  margin: 5px;
  border: 1px solid #cccccc;
  width: 800px;
  word-wrap: break-word;
}

<div>
  <span>stuff</span>
  <span>more stuff</span>
  <span>even more stuff</span>
  .
  .
  .
</div>

谢谢！

为了更好的解释：每行应该有多个标签，并且换行应该在标签之间。

- user191688

---

我不明白你想要实现什么。设置display:block和width:100%能解决这个问题吗？ - Chris Felstead

我的答案基于您不能编辑HTML或使用任何JavaScript进行编辑。 - Huangism

我对那个编辑更加困惑了，一行上有多个跨度，但是在跨度之间换行 - 这不是相互矛盾的吗？或者你的意思是只有当该行达到最大字符数时才会换行，然后在下一个/span处换行。 - Huangism

这与浮动块的行为相同：尽可能多地放置块在一行上，然后继续到下一行，而不会将块切成两半。inline-block避免了浮动引起的问题（.clearfix等），但由于两个span之间的空格显示为空格而创建了另一个问题，需要修复（虽然在这里不需要，span没有粘在一起）。 - FelipeAls

请为每个<span>添加display: inline-block;属性 - 请参考http://getbootstrap.com/components/#callout-labels-inline-block - Chemical Programmer

Answer 1

编辑（2017年）：具有包装特性的Flexbox display: flex; flex-wrap: wrap 可与IE10+（和Android 4.4+）兼容，并且将允许水平（两端对齐，左对齐或右对齐，space-around，居中）和垂直方向上的多样化对齐方式（align-items），还可以在行与行之间设置多样的间距（如果通常设置高度）。
奖励：与 inline-block 不同，不需要处理项目之间的 ~4px 的空格。你可以做你想做的事情：没有间距、flex: 1 1 auto 或者 padding: 1rem 等等。
CSS Tricks中Flexbox的速查表
/编辑

Span看起来不太语义化，也许使用无序列表会更好一些？

如果我理解得正确，您希望每行放置尽可能多的span，但是不要出现一个span跨越多行的情况？
那么以下代码片段：http://jsfiddle.net/MRR6P/ 就可以解决问题了。试一下

span {
  line-height: 1.8;
  word-wrap: normal;
  display: inline-block;
}

- FelipeAls

---

作者并未明确指出这是一个要求，但请注意，许多常见但较旧的浏览器仍不支持inline-block。 - Jon Adams

是的，他需要添加组合 span { display: inline; zoom: 1; } 仅供 IE6 和 IE7 使用。剩下的唯一问题将是在 Firefox 2 上（解决方案为 display: -moz-inline-stack;，但有警告），但当 IE6 在相当多的跨国公司和中国仍然存在时，Fx2已经过时 :) - FelipeAls

@FelipeAlsacreations 这似乎完美地运作。我可能不需要旧版浏览器支持。谢谢！ - user191688

Answer 2

不太确定您的意思，但如果您想让每个 span 显示在不同的行上，则将它们设置为显示块级元素。

span { display: block; }

编辑

可能

white-space:nowrap;

像这样吗？http://jsfiddle.net/xNndp/1/，当然除了 div 上没有宽度属性。

- Huangism

---

不，他不想让每个span都在新的一行上，他希望每个span不换行，只在span之间进行换行。 - Jon Adams

哦，我明白了。由于它会打断不可分割的单词，因此“word-break”无法使用。需要一些类似于表格单元格上的“no wrap”功能。 - Huangism

Answer 3

我有一个简单的解决方案。您只需要在每个的内容末尾添加一个空格，或在每两个之间添加一个空格即可。这很有效，打印效果也很好看！

- Winter's Love

Answer 4

所以如果您希望所有这些span元素单独占用一行（这是我理解的），您应该使用 <p> 或 <li> 而不是span元素。然后，您可以使用行高来控制行之间的间距。

实际上，您甚至可以使用 <br> 来换行。

另一种方法是将您的span元素设置为 display:block，使它们在结束时跳过一行。

- Fredy31

Answer 5

尝试在“div”的CSS中使用“display:block;”。然后根据需要的间距调整边距/填充。

- Jordan Parker

Answer 6

最快的方法，虽然不完美，是使用span { white-space: nowrap }。当然，如果 <span> 的宽度超过了<div>的宽度，你就会遇到问题。你要么需要使<div>可以滚动，要么使用JavaScript来解决这种情况。

CSS规范中其他带有white-space选项的display并不足以跨浏览器工作，无法按照您想要的方式工作。

- Jon Adams

Answer 7

你是想让 span 的行为像 div 吗？

如果是的话，你可以使用以下代码：

display: block;

例子：

http://jsfiddle.net/xNndp/

- Josh Foskett