Bootstrap 4在移动设备的表格内截断长文本

Question

我正在创建一个响应表，以便在桌面设备和移动设备中使用它 问题是，当表格加载长文本时，它会被截断，从而破坏了“响应”的概念。 我只是在移动平台上遇到了这个问题，所以这里是问题的截图（如果它可以帮助......）：

解决此问题的最佳方法是什么？ 我已经尝试了很多其他教程，但不幸的是，没有人工作过。

- 编辑 - 表格的HTML：

<table class="table table-hover table-dark">
<thead>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
    <th scope="col">Password</th>
  </tr>
</thead>
<tbody>
  {{#each users}}
  <tr>
    <th scope="row">{{name}}</th>
    <td class="text"><span>{{email}}</span></td>
    <td class="text"><span>{{password}}</span></td>
  </tr>
  {{/each}}
</tbody>

除了背景颜色之外，我没有任何自定义CSS。

Answer 1

要截断HTML表格中的文本，首先要确定在小屏幕上允许的最大宽度（以像素为单位），然后应用text-truncate类以及max-width样式，如此：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<span class="d-inline-block text-truncate" style="max-width: 150px;">
  Praeterea iter est quasdam res quas ex communi.
</span>

要根据可用空间自动截断，您需要将整个事物重组为Bootstrap网格。然后你可以使用它：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="row">
  <div class="col-2 text-truncate">
    Praeterea iter est quasdam res quas ex communi.
  </div>
</div>

Answer 2

我接下来尝试了

<td width="70%" class="text-truncate" style="max-width: calc( 70 * 1vw )">

它似乎正在工作。

Answer 3

查看手机上的通讯录应用。您会注意到它只显示“索引”视图中每行的名称。从那里，用户将点击每个用户名以显示有关每个联系人的其他详细信息。这就是我们所说的移动应用的“渐进式披露”。