如何在 <div> 中包装多个 <span>

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>

谢谢！

编辑澄清：每行应该有多个跨度，并且包装应该在跨度之间。

原文由 user191688 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

编辑（2017 年）：带包装的 display: flex; flex-wrap: wrap 与 IE10+（和 Android 4.4+）兼容，并允许在水平方向上进行多种对齐（对齐、左对齐或右对齐， space-around ，居中）和垂直（ align-items ）以及行之间的通用间距（ align-content …如果设置了高度，通常）。

奖励：与 inline-block 一样，需要注意的项目之间没有 ~4px 空格。你做你想做的事：没有排水沟， flex: 1 1 auto 或 padding: 1rem 例如

关于 CSS 技巧的 Flexbox 备忘单

/编辑

跨度似乎不是很语义化，也许使用无序列表？

如果我很好地理解了您的问题，您希望每行有尽可能多的跨度，但没有跨度从一条线开始并在另一条线结束？

然后下面的小提琴：http: //jsfiddle.net/MRR6P/ 会做的伎俩。尝试

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

原文由 FelipeAls 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我有一个简单的解决方案。您只需要在每个跨度的内容末尾添加一个空格，或者在每两个跨度之间添加一个空格。它工作得很好，打印会很漂亮！

原文由 Winter‘s Love 发布，翻译遵循 CC BY-SA 4.0 许可协议