CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Sato
Sato

Reputation: 8622

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>

Upvotes: 1

Views: 5973

Answers (2)

thepio
thepio

Reputation: 6263

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.

Upvotes: 4

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10207

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>

Upvotes: 0

Related Questions