0

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-xxcol-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>

1
  • 1
    「指定の親要素幅」はどのように指定しているのでしょうか?例えばwidthで設定していればそれをはみ出すことはありませんし、折り返しもlabel単位でされると思います。 例 codepen.io/anon/pen/yaroWE なので現在書かれている情報では状況がつかめないのですが、問題が起きるHTMLやCSS全体を記載していただくことはできますか?
    – unarist
    2016年9月24日 9:36

1 件の回答 1

2

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

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

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

<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>

が、実際はこうです:

<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>

改行ではなく &nbsp; で区切られていますね?これは non-breaking space というもので、改行してはならない空白を意味します。一方で通常の半角スペースや改行は改行できる空白です。

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

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

3
  • ありがとうございます。&nbsp;の本来の意味を忘れてスペース代わりに使っていました。&nbsp;をやめて半角スペースに置き換えてみましたが、やはり要素単位に折り返してくれません。親要素をwhite-space:no-wrap;を外すと折り返すんですが、仰るように今度は要素の途中で折り返してしまいます。そうすると半角スペースでどうして改行してくれないのかってことになるのですが、教えて頂けないでしょうか?いかんせん、CSSがよく理解できていません。
    – tomorin
    2016年9月24日 17:20
  • すみません、先ほどのコメントは誤りです!別の場所の&nbsp;をいじっていて直ってませんでした。&nbsp;を半角スペースに置き換えたところ、ちゃんと改行してくれました!詳しく教えてくださり、ありがとうございます!大変助かりました!
    – tomorin
    2016年9月24日 17:28
  • @tomorin コメント時間表示の後ろにマウスを持っていくと赤丸に✕のマークがでて、それをクリックすると自分のコメントを削除できます。
    – BLUEPIXY
    2016年9月24日 18:46

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。