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

【问题标题】：Bootstrap 4 truncate long text inside a table in mobile devicesBootstrap 4 截断移动设备表格内的长文本
【发布时间】：2018-07-08 08:12:32
【问题描述】：

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

解决此问题的最佳方法是什么？我尝试了许多其他教程，但不幸的是，没有一个成功。

-- 编辑-- 表格的 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，除了背景颜色。

【问题讨论】：

如果您需要帮助，我建议您发布表格的 HTML，您很可能在那里遇到了 css 问题。如果您使用自定义 css 类，请将它们与 HTML 一起发布。我们无法通过简单的屏幕截图确切地告诉您为什么会得到这个结果。
请查看此链接，它会在表格内容上省略：stackoverflow.com/questions/39148127/…

标签： html twitter-bootstrap css responsive-design bootstrap-4

【解决方案1】：

接下来我尝试了

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

它似乎正在工作。

【讨论】：

【解决方案2】：

要截断 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>

【讨论】：

表格中的情况有所不同。特别是“表响应”类

【解决方案3】：

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

【讨论】：

所以你建议改变整个设计？
是的，这就是我们必须为“移动应用程序”做事的方式。手机上的纵向模式是最难设计的。这就是为什么我们说我们的设计应该是“移动优先”。从手机的纵向模式开始，然后逐步向上。或者，您可以简单地让您的应用仅适用于最小尺寸的屏幕。
是的，我认为你的想法在这里是最好的，表格将存储很长的字符串（如描述、名称等），所以我不能使用这样的设计。