我在我的 Python 模板中使用了分词。所以基本上我正在将 html 转换为 pdf。所以一切正常。但是长话并没有在我的 table 上崩溃。请帮我分解 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>
最佳答案
@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>
尝试使用 word-break: break-word;
相反,在 td 上添加缺失的 .td
类到 <td>
元素。
关于html - 如何在 CSS 和 HTML 中打断长单词,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54572609/