How to Break Long Words in a Table Td

How to break long words in a table td?

I think this solution will help you!

pre {
    white-space: pre;           /* CSS 2.0 */
    white-space: pre-wrap;      /* CSS 2.1 */
    white-space: pre-line;      /* CSS 3.0 */
    white-space: -pre-wrap;     /* Opera 4-6 */
    white-space: -o-pre-wrap;   /* Opera 7 */
    white-space: -moz-pre-wrap; /* Mozilla */
    white-space: -hp-pre-wrap;  /* HP Printers */
    word-wrap: break-word;      /* IE 5+ */
}

http://perishablepress.com/press/2010/06/01/wrapping-content/

// Edit

It's been a long time since this was accepted as the best answer and updates are required. See @benhowdle89's and @Steve's answers below.

So the current browser support is now good enough to use word-break in order to allow words to be broken over multiple lines.

word-break: break-all

http://caniuse.com/#feat=word-break

How to break a long word in a table TD element?

I think you're trying to implement the solution described here:
force line break in html table cell
If you want to automatically wrap a word then you have to add the width of the table itself. In your case set the width of the table to 100% to create equal sized columns that automatically wrap. I prepared a small example with 80% width and the 20px column here.

<html>
<body>
    <table cellspacing="0" cellpadding="1" style="border-collapse: collapse;">
        <tbody>
            <tr >
                <td>
                123
                </td>
                <td>123</td>
                <td style="width: 20px">
                    canyouhelpmebreakintolineswith20pxwidth?</td>
            </tr>
            <tr>
                <td>
                abc
                </td>
                <td>
                def
                </td>
                <td>
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

And the css:

table {border-collapse:collapse; table-layout:fixed; width: 80%}
table td {
  border-width: 1px;
  border:solid 1px; 
  word-wrap:break-word;}

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>
        How to Break Long Words in a Table TdHow to Break Long Words in a Table TdHow to Break Long Words in a Table TdHow to Break Long Words in a Table TdHow to Break Long Words in a Table TdHow to Break Long Words in a Table TdHow to Break Long Words in a Table TdHow to Break Long Words in a Table Td
        
    </td>
  </tr>
</table>

Wrap table cell with long word

updated link

Css Code:

table {
    width: 100%;
}
td {
    text-align: right;
    white-space: nowrap;
}
td div {
    white-space: normal;
    word-break: break-all;
    display: block;
}

How to make td to break on spaces and only break in word if word is too big for space

The code you gave performs OK when I try it. I think the property word-break may be set to break-all or break-word somewhere else.
Try forcing it to use "normal".

.simple-table {
  width: 100%;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  word-break: normal;
}

Break long text without spaces inside table cell

The secret is to use word-break:break-all on each <td> cell.

Alternatively you can use overflow-wrap but behaves similar.

Note: In contrast to word-break, overflow-wrap will only create a break if an entire word cannot be placed on its own line without overflowing.

Here's a thorough article comparing them both

table{  width: 400px;  border: 1px dashed salmon;}
table td{   vertical-align: top;   padding: 5px;  word-break: break-all;  /* MUST ADD THIS */}
table td:nth-child(1){  text-align: right;  width: 140px;}

<table>  <tr>    <td>Your name:     <td>David  </tr>  <tr>    <td>Your city:     <td>Prageu  </tr>  <tr>    <td>Your Informations:     <td>myinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfomyinfo  </tr></table>

How to break long words in CSS and HTML

@page {  size: A4;  margin: 1cm;}
.table,td,th {  border: 1px solid #ddd;  text-align: left;}
.table {  border-collapse: collapse;  width: 100%;  table-layout: fixed;}
.table th,td {  padding: 5px;  text-align: center;}
.td {  word-break: break-word;}
.list-group h3 {  font-size: 3em;}
.list-group p {  font-size: 1em;}
.table1 {  width: 100%;  max-width: 100%;  margin-bottom: 5px;  background-color: #fff;  border: none;  text-align: center;}

<div class="container">  <div class="card">    <table class="table1">      <td><img src="https://mytabtime.com/wp-content/uploads/2018/09/myTABtime-com-logo-240.png" alt="logo" /></td>      <td>        <div class="list-group">          <h3>Company Report</h3>          <p>Date - {% now "jS F Y H:i" %}</p>        </div>      </td>    </table>    <br/>    <table class="table">      <thead>        <tr>          <th>#</th>          <th>Company Name</th>          <th>Company Email</th>          <th>Count Of Total Users</th>          <th>Created Date</th>          <th>Current Monthly Payment</th>          <th>Is TABopts Customer</th>          <th>Status</th>        </tr>      </thead>      <tbody>        {% if companies %} {% for company in companies %}        <tr>          <td class="td">{{ forloop.counter }}</td>          <td class="td">{{ company.company_name }}</td>          <td class="td">{{ company.company_email }}afsdasdfasdfasdf</td>          <td class="td">{{ company.number_of_company_users }}</td>          <td class="td">{{ company.company_created |date:"M d, Y" }}</td>          <td class="td">{{ company.company_monthly_payment }}</td>          <td class="td">{{ company.company_tab_opts }}</td>          <td class="td">{{ company.company_status }}</td>        </tr>        {% endfor %} {% endif %}      </tbody>    </table>  </div></div>

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>

How to Break Long Words in a Table Td