要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない

bootstrapのlabelを使っています。
これを複数横並びにしていますが、指定の親要素幅を超えると親要素幅が伸びてしまいます。
複数ある子要素を横並びにしつつ、適宜折り返したいです。ただし要素の途中で折り返したく有りません。要素単位で折り返したいです。
下記の例なら、label label-info指定の子要素を横並びにしますが、「データn」の途中で折り返さず、親要素幅以内で「データn」単位で折り返したいです。

<div class="test">
  <span class="label label-info">データ1</span>
  <span class="label label-info">データ2</span>
  ...
  <span class="label label-info">データ8</span>
  <span class="label label-info">データ9</span>
</div>

親要素の親は、<table>です。bootstrapのグリッドシステムで幅をいじろうとしていますが、試行錯誤している最中です。<th>タグに対してcol-xs-xxやcol-md-xxを使って幅制御しています。

labelは、javaScript(jQuery)で動的に出していますが、その際に折り返しが行われません。

動的生成後のHTMLのサンプル (編集者が抽出)

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <table class="table table-bordered table-striped">
        <tr>
          <th class="col-xs-1">colA</th>
          <th class="col-xs-3">colB</th>
        </tr>
    <tr><td>foo</td><td>bar</td></tr>
      </table>
      <table class="table table-bordered table-striped">
        <tr>
          <th class="col-xs-1">colA</th>
          <th class="col-xs-3">colB</th>
        </tr>
        <tr>
          <td class="col-xs-1">Lorem ipsum dolor</td>
          <td class="col-xs-3">
            test&nbsp;<span class="label label-info">データ1</span> <span class="label label-info">データ2</span>&nbsp;<span class="label label-info">データ3</span>&nbsp;<span class="label label-info">データ4</span>&nbsp;<span class="label label-info">データ5</span>&nbsp;<span
                class="label label-info">データ6</span>&nbsp;<span class="label label-info">データ7</span>&nbsp;<span class="label label-info">データ8</span>&nbsp;<span class="label label-info">データ9</span>
          </td>
        </tr>
      </table>
    </div>
  </div>
</div>