html - 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-wrap 之外，您还可以使用 word-break: break-word; 来分隔单词(长字符串)，如下所示:

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 有什么区别？

word-wrap:word-wrap CSS 属性用于指定浏览器是否可以在单词内换行，以防止在无法换行的字符串太长而无法容纳时溢出它的收纳盒。

word-break:word-break CSS 属性用于指定如何(或是否)在单词中换行

总而言之，您需要它们来断开长字符串，而不要在 word-wrap 可以放置的位置留出任何空格。