Using "Word-Wrap: Break-Word" Within a Table

Using word-wrap: break-word within a table

table-layout: fixed will get force the cells to fit the table (and not the other way around), e.g.:

<table style="border: 1px solid black; width: 100%; word-wrap:break-word;
              table-layout: fixed;">
  <tr>
    <td>
        Using "Word-Wrap: Break-Word" Within a TableUsing "Word-Wrap: Break-Word" Within a TableUsing "Word-Wrap: Break-Word" Within a TableUsing "Word-Wrap: Break-Word" Within a TableUsing "Word-Wrap: Break-Word" Within a TableUsing "Word-Wrap: Break-Word" Within a TableUsing "Word-Wrap: Break-Word" Within a TableUsing "Word-Wrap: Break-Word" Within a Table
        
    </td>
  </tr>
</table>

break-word does not work inside table.td

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>

Word wrap in table cell

Use word-break:break-all instead of word-wrap: break-word;

display: table-cell;
width: 50%;
word-break:break-all;

td {  width:33.3%;  word-break:break-all;}

<table><tr>  <td>largcontent_without_sapce_large_content_without_space</td>  <td>Samll Content</td>  <td>Test Content</td></tr><tr>  <td>largcontent_without_sapce_large_content_without_space_content_without_space</td>  <td>Samll Content</td>  <td>Test Content</td></tr><tr>  <td>largcontent_without_sapce_large_content_without_space</td>  <td>Samll Content</td>  <td>Test Content</td></tr></table>

Automatic column width with `overflow-wrap: break-word`

I think either you should go with display flex or add a small tweak in the CSS like shown below.

.table-wrap tr > td:nth-child(1),
.table-wrap tr > td:nth-child(2) {
  white-space: nowrap;
}

.table-wrap tr > td:nth-child(3) {
  word-break: break-word;
}

th,td {
  padding: 0px 16px
}

<table class="table-wrap" style="width: 100%;">
  <tr>
    <th>ID</th>
    <th>Time</th>
    <th>Data</th>
  </tr>
  <tr>
    <td>0</td>
    <td>10:11</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>1</td>
    <td>10:12</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space</td>
  </tr>
  <tr>
    <td>2</td>
    <td>10:13</td>
    <td>some_long_value_that_may_or_may_not_contain_a_space_and_it_may_be_so_long_that_it_wont_fit_into_the_column_and_needs_to_be_wrapped</td>
  </tr>
</table>

CSS word-wrap does not work in table

Add the following code to your td's CSS style table.tableSection th, table.tableSection td { ... }

word-break: break-all;

Here is the updated fiddle:
https://jsfiddle.net/bmc7r8rz/8/

Using "Word-Wrap: Break-Word" Within a Table