css - 如何在 中包裹多个

Question

我有一个 <div>具有硬编码宽度。 <div>里面有几百个<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>

谢谢!

编辑澄清:每行应该有多个跨度，跨度之间应该换行。

Answer 1

编辑(2017):带包装的 Flexbox display: flex; flex-wrap: wrap与 IE10+(和 Android 4.4+)兼容，并且允许水平(对齐、左对齐或右对齐、space-around、居中)和垂直(align-items)以及线之间的多用途间距(align-content) ...如果设置了高度，一般来说)。
奖励:与 inline-block 一样，元素之间没有 ~4px 的空白要处理。 .你几乎可以做你想做的事:没有排水沟，flex: 1 1 auto或 padding: 1rem例如
<强> Cheatsheet for Flexbox on CSS Tricks
/编辑

Span 好像不太语义化，也许使用无序列表？

如果我很好地理解您的问题，您希望每行的跨度尽可能多，但没有从一行开始到另一行结束的跨度？
然后是以下 fiddle :http://jsfiddle.net/MRR6P/会成功的。尝试

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