break-word does not work inside table.td - html

Question

I expect something like this:
|-----------panel-heading---------------------|
| | Name | Sex | |
| wrap-word | wrap-word |
| wrap-word |
but as you can see, the long word 111... and 222... does not wrap and the table is longer than panel
How to fix it?
<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

You can make the words (long strings) break with word-break: break-word; in addition to your word-wrap like this:
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>
This will also work on other elements like divs, spans etc.
What's the difference between word-wrap and word-break?
word-wrap: The word-wrap CSS property is used to specify whether or not the browser may break lines within words in order to prevent overflow when an otherwise unbreakable string is too long to fit in its containing box.
word-break: The word-break CSS property is used to specify how (or if) to break lines within words
In conclusion you need them both to break long strings without any spaces where the word-wrap could take in place.

Answer 2

Use table-layout:fixed this will wrap the table within the width of the parent div and text will break automatically.
table{
table-layout:fixed;
}
<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>