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>