当我使用属性时，我有一个通过自定义 CSS 响应的表格
<td data-column="Column Name or Long Text"></td>
数据列中的大文本未包含在表格中。它在 table 外面。
.table_card_view { border-collapse: collapse; }
@media only screen and (max-width:768px) and (min-width:200px) {
.table_card_view, .table_card_view thead, .table_card_view tbody, .table_card_view th, .table_card_view td, .table_card_view tr
{ display: block; }
.table_card_view thead tr { position: absolute; top: -9999px; left: -9999px; }
.table_card_view tr
{ border: 1px solid #ccc; margin-top: 4%; border-radius:7px; }
.table_card_view td {
border: none; border-bottom: 0px solid #eee;position: relative; padding-left: 50%;
}
.table_card_view td:before {
top: 6px; left: 6px; width: 45%;padding-right: 10px; white-space: nowrap; content: attr(data-column); color: #000; font-weight: bold;
}
}
<body>
<table class="table table-striped table_card_view">
<thead><tr>
<th> Date and Time </th>
<th>
No. of Company 1 Users Processed in Company 2
</th>
<th>
No. of Company 2 Tickets Processed in Company 2
</th>
<th> Any Error ? </th>
</tr> </thead>
<tbody>
<tr>
<td data-column="Date and Time"> 23 July 2019 </td>
<td data-column="No. of Company 1 Users Processed in Company 2">
1 </td>
<td data-column="No. of Company 1 Tickets Processed in Company 2">
2 </td>
<td data-column="Any Sync Error ?"> 0 </td>
</tr></tbody>
</table>
</body>
我希望在 data-column=""中使用大文本，而不是超出表格范围。
最佳答案
试试 word-break css 属性
th, td {
word-break: break-word;
}
关于html - 如何在移动 View 中将长文本包装在表格的数据列中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57179465/