Sato Sato - 5 months ago 56
CSS Question

break-word does not work inside table.td

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

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.

Comments