29093


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

[code]

    <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>
    
[/code]

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

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

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

[code]

    <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>
[/code]


CC BY-SA 3.0
2016-09-24T08:59:35.973
29092
2016-09-24T11:46:08.130
2016-09-24T11:01:02.200
8000
7966
question
html css bootstrap
要素中にある複数の要素を適宜折り返したい、ただし要素の途中で折り返さない


table要素はデフォルト（`table-layout:
auto`）では表の全てのセルを考慮して[幅を決定します](https://www.w3.org/TR/CSS2/tables.html#auto-
table-layout)。この時 **「折り返しを考慮しても中身が枠をはみ出ない幅」** が、親要素の幅や、テーブル自身に指定された `width`
CSSプロパティを超えていた場合、それらの値を無視して「折り返しを考慮しても中身が枠をはみ出ない幅」がテーブルの幅となります。これが今回の現象です。

ということで中身を **折り返すことができない**
のがおかしいという話になるのですが、貼っていただいたURLを確認したところ、質問に最初書かれていたコードと少し違うことがわかりました。

質問に書かれていたのはこうです：

[code]

    <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>
    
[/code]

が、実際はこうです：

[code]

    <div class="test">
      <span class="label label-info">データ1</span>&nbsp;<span class="label label-info">データ2</span>&nbsp;...<span class="label label-info">データ8</span>&nbsp;<span class="label label-info">データ9</span>
    </div>
    
[/code]

改行ではなく `&nbsp;` で区切られていますね？これは [non-breaking
space](https://ja.wikipedia.org/wiki/%E3%83%8E%E3%83%BC%E3%83%96%E3%83%AC%E3%83%BC%E3%82%AF%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9)
というもので、改行してはならない空白を意味します。一方で通常の半角スペースや改行は改行できる空白です。

今回の場合、通常の半角スペースや改行を挟まずに、`&nbsp;` でだけ要素が区切られていたために、そこで折り返すことができなかったのです。
`&nbsp;` ではなく普通の半角スペースを挿入することで、要素ごとに折り返されるようになり、テーブルの幅が異様に広くなることもなくなるかと思います。

細かい話をすると、デフォルトで折り返しが許可されないのは英単語もとい連続した英数字です。日本語の場合はどこでも切れるので、途中で折り返される可能性もあるわけですが、Bootstrapのlabelクラスでは
`white-space: nowrap`
によって折り返しが禁止されているので、日本語が連続する部分でも折り返すことができません。この辺りは既に考慮されているわけです。


CC BY-SA 3.0
2016-09-24T11:46:08.130
29093
2016-09-24T11:46:08.130
8000
29092
answer