如何在 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 属性 'word-break' 而不是 word-wrap。

Read this for more info