How to break long words in CSS and HTML

Question

I am using word break in my Python template. So basically i am converting html to pdf. So everything is working fine. But long words are not breaking down in my table. Please help me to break down long words in td. I have made td class where i was trying to break words. But it seem not working. Please Help.

@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-wrap: break-word;
  overflow-wrap: 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>{{ 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>

Answer 1

@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>

Try using word-break: break-word; on td instead and add the missing .td class to the <td> element.

Answer 2

Use css property 'word-break' instead of word-wrap.

Read this for more info