css – 如何包装许多内容

我有一个< div>具有硬编码宽度.在< div>内是几百英寸的< span>标签.我可以包裹跨距以使行间距正确并且包裹在跨度之间吗？我使用自动换行：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>

谢谢！

编辑澄清：每行应该有多个跨距,并且应该在跨距之间进行包装.

解决方法

EDIT(2017)：带有包装显示的FlexBox：flex; flex-wrap：wrap与IE10(和Android 4.4)兼容,允许水平(对齐,左右对齐,空间,居中)和垂直(对齐项)的多种对齐,线条之间也有多种间距(align-content …如果设置了高度,通常).
额外：项目之间没有~4px空白,需要像内联块一样进行处理.你做了你想做的事情：没有装订线,flex：1 1 auto或padding：例如1rem
Cheatsheet for Flexbox on CSS Tricks
/编辑

Span似乎不是很语义,也许使用无序列表？

如果我很清楚你的问题,那么你想要的每条线的跨度是多少,但是没有跨越线并且在另一条线上完成？
然后是下面的小提琴：http://jsfiddle.net/MRR6P/就可以了.尝试

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