在nowraps之间包装

Question

我有一个应该以内联方式显示的链接列表。 问题是我不希望文本包含在链接的中间。如果它需要换行，它应该只在 链接之间 。

因此我已将white-space:nowrap;属性添加到我的链接中。但是生成的链接列表 从不 包装并退出我的div框。

知道如何让我的列表在链接之间进行换行吗？谢谢！

<div class="box">
<p>
<a href="mylink1" class="mytag">Hello there</a>
<a href="mylink2" class="mytag">Hello you</a>
<a href="mylink3" class="mytag">Hello people</a>
<a href="mylink4" class="mytag">Hello world</a>
</p>
</div>

相关的CSS只是：

.mytag,.mytag:link,.mytag:visited{
  background-color:#FFF5CA;
  border:1px solid #FFE5B5;
  color:#222;
  padding:2px 5px;
  margin-right:5px;
  white-space:nowrap;
}
.mytag:hover{
  background-color:#FFE5B5;
}

Answer 1

基本上，white-space:nowrap;正在完全按照预期进行，并且不会将元素分成多行。

您实际需要的是在一行上显示链接，而不会将链接包裹到下一行。因此，请将display属性用作inline-block。

.mytag,.mytag:link,.mytag:visited{
  background-color:#FFF5CA;
  border:1px solid #FFE5B5;
  color:#222;
  padding:2px 5px;
  margin-right:5px;
  display: inline-block;
}

Answer 2

这里没有任何神秘的东西 - 如果你的容器有特定的widhth，它们应该自动换行链接：http://jsfiddle.net/RZfd2/