html - 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 类和 最大宽度 样式如下:

<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>