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）：带有包裹display: flex; flex-wrap: wrap的Flexbox与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
/ EDIT

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

如果我很清楚你的问题，那么你想要的每条线的跨度都是合适的但是没有跨越线并且在另一条线上完成？接下来的小提琴：http://jsfiddle.net/MRR6P/就可以了。尝试

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

Answer 2

不是100％确定你的意思，但如果你想让每个跨度显示在不同的行上，那么让它们显示块

span { display: block; }

修改

也许

white-space:nowrap;

像这样？ http://jsfiddle.net/xNndp/1/除了当然没有宽度

Answer 3

因此，如果您希望所有这些跨度为自己采取一行（这就是我所理解的），您应该使用<p> s或<li> s而不是跨度。然后，您可以使用行高来控制行之间的空间。

天啊，你甚至可以使用<br>来打破你的界限。

另一种方法是设置你的跨度display:block，使它们在结束时跳过一行。

Answer 4

尝试使用display：block;在css内。然后调整边距/填充以获得所需的间距。

Answer 5

你是否想让跨度像div一样？

如果是这样，您可以使用以下内容：

display: block;

示例：

http://jsfiddle.net/xNndp/

Answer 6

最快捷的方法是使用span { white-space: nowrap }，但不是很完美。当然，如果<span>宽度超出<div>宽度，您将遇到问题。您需要使<div>可滚动，或使用JavaScript来修复此方案。

CSS规范中具有display选项的其他white-space并非跨浏览器，无法按照您希望的方式工作。

如何在<div> </div> </span>中包装许多<span>

6 个答案: