break-word在table.td中不起作用

Question

我期待这样的事情：

|-----------panel-heading---------------------|
|    | Name           | Sex     |             |
|  wrap-word          |  wrap-word            |  
|               wrap-word                     |

但正如您所看到的，长字111...和222...不会换行，而且表格比面板长

如何解决？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading">test </div>
    <div class="panel-body">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Sex</th>
            <th></th>
          </tr> 
        </thead>  
        <tbody>     
          <tr >   
            <td>ff</td>
            <td>wer</td>
            <td>1</td>
            <td>asdf</td>
          </tr>     
          <tr class="">
            <td colspan="4">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-lg-6 col-md-6 col-xs-12">                    <h2 style="word-wrap: break-word">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h2>
                  </div>
                  <div class="col-lg-6 col-md-6 col-xs-12">                    <h2 style="word-wrap: break-word">22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</h2>
                    <hr>
                  </div>
                </div>
                <div class="row">                  <h2 style="word-wrap: break-word">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</h2>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Answer 1

除了word-break: break-word;之外，您还可以使word-wrap单词（长字符串）中断：

h2 {
  word-wrap: break-word;
  word-break: break-word;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="panel panel-default">
    <div class="panel-heading">test </div>
    <div class="panel-body">
      <table class="table">
        <thead>
          <tr>
            <th></th>
            <th>Name</th>
            <th>Sex</th>
            <th></th>
          </tr> 
        </thead>  
        <tbody>     
          <tr >   
            <td>ff</td>
            <td>wer</td>
            <td>1</td>
            <td>asdf</td>
          </tr>     
          <tr class="">
            <td colspan="4">
              <div class="container-fluid">
                <div class="row">
                  <div class="col-lg-6 col-md-6 col-xs-12"><h2>11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h2>
                  </div>
                  <div class="col-lg-6 col-md-6 col-xs-12"><h2>22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</h2>
                    <hr>
                  </div>
                </div>
                <div class="row"><h2>33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</h2>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

这也适用于divs，spans等其他元素。

word-wrap和word-break之间有什么区别？

自动换行：自动换行CSS属性用于指定浏览器是否可以在单词中断行，以防止在其他不可破解的字符串太长而无法容纳时出现溢出它的收纳盒。

word-break ：word-break CSS属性用于指定如何（或如果）断开单词内的行

总之，你需要它们来打破长字符串而没有word-wrap可以采用的任何空格。

Answer 2

使用table-layout:fixed这会将表格包裹在父div的宽度内，文本会自动中断。

＆＃13;

＆＃13;

table{
  table-layout:fixed;
}

＆＃13;

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="container-fluid">
      <div class="panel panel-default">
        <div class="panel-heading">test </div>
        <div class="panel-body">
          <table class="table">
            <thead>
              <tr>
                <th></th>
                <th>Name</th>
                <th>Sex</th>
                <th></th>
              </tr> 
            </thead>  
            <tbody>     
              <tr >   
                <td>ff</td>
                <td>wer</td>
                <td>1</td>
                <td>asdf</td>
              </tr>     
              <tr class="">
                <td colspan="4">
                  <div class="container-fluid">
                    <div class="row">
                      <div class="col-lg-6 col-md-6 col-xs-12">                    <h2 style="word-wrap: break-word">11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</h2>
                      </div>
                      <div class="col-lg-6 col-md-6 col-xs-12">                    <h2 style="word-wrap: break-word">22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222</h2>
                        <hr>
                      </div>
                    </div>
                    <div class="row">                  <h2 style="word-wrap: break-word">33333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333333</h2>
                    </div>
                  </div>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

＆＃13;

＆＃13;

＆＃13;