CSS溢出/超越容器div

Question

请参阅附图，更容易解释我的意思。

我正在使用Bootstrap。我有一个带有col-md-4和col-md-8的页面。 col-md-4列出了所见的国家名单。

我面临两个问题。

1. 为什么我的国家标签没有＆＃39;包装＆＃39;一旦他们达到col-md-4宽度？ （你可以看到垂直边框）我只是希望它们不经过
就流到下一行



1. 即使我人为地打破了＆＃39;每发生一次X后的标签，我看到这行奇怪的最后一个标签分解并出现在下一行（例如，见图片底部的佛得角）

其他详情：

每个国家/地区标签基本上都是跨度

<div class='row'>
<div class="col-md-4">
    ...some other bootstrap tabs/panel stuff
    <div>
        <span class="mm-place" id="AU">Australia</span>
        <span class="mm-place" id="CA">Canada</span>
        ...
    </div>
</div>
</div>

和mm-place类定义如下。

.mm-place {
  border-radius: 5px;
  border: 1px solid #cccccc;
  font-size: 10px;
  margin: 3px;
  padding: 3px;
}

FIXED：刚刚使用了显示：mm-place样式的inline-block，并用div替换了span。

Answer 1

使用white-space: nowrap;阻止文本分成多行

更新了CSS：

.mm-place {
  border-radius: 5px;
  border: 1px solid #cccccc;
  font-size: 10px;
  margin: 3px;
  padding: 3px;
  white-space: nowrap;  //added this
}

Bootply example here

请注意，如果任何国家/地区名称大于col-md-4，则该行的文字将大于col-md-4。如果适用于您，您可以在this question中查看有关管理溢出文本的信息。