如何在CSS和HTML中打断长字

Question

我在Python模板中使用分词。所以基本上我是将html转换为pdf。因此，一切正常。但是，我的餐桌上长话不说。请帮助我分解td中的长词。我上了td类，当时我想打断单词。但它似乎不起作用。请帮忙。

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

尝试在td上使用word-break: break-word;，然后将缺少的.td类添加到<td>元素中。

Answer 2

使用CSS属性“断字”代替自动换行。

Read this for more info