twitter-bootstrap Bootstrap 4 截断移动设备表格内的长文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48504538/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 truncate long text inside a table in mobile devices
提问by zDoes
I'm creating a responsive table in order to use it both in Desktop and mobile devices.
The problem is that when the table loads long text it get truncated ruining the concept of 'responsive'.
I encountered into this problem only on the mobile platform, so here is a screenshot of the problem(if it can help...):
我正在创建一个响应式表，以便在桌面和移动设备中使用它。
问题在于，当表格加载长文本时，它会被截断，从而破坏了“响应式”的概念。
我只在移动平台上遇到过这个问题，所以这里是问题的截图（如果它可以帮助......）：
What is the best way to fix this problem? I've tried many other tutorials but, unfortunately, no one has worked.
解决此问题的最佳方法是什么？我已经尝试了许多其他教程，但不幸的是，没有人奏效。
-- EDIT -- The HTML for the table:
-- 编辑 -- 表格的 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>
I don't have any custom css, except the one for the background color.
我没有任何自定义 css，除了背景颜色。
采纳答案by Ron Hudson
Look at the contacts app on your phone. You'll notice that it only shows the name on each line in an "index" view. From there, users will click on each user name to reveal additional details about each contact. This is what we call "progressive disclosure" for mobile apps.
查看手机上的通讯录应用。您会注意到它仅在“索引”视图中的每一行上显示名称。从那里，用户将单击每个用户名以显示有关每个联系人的其他详细信息。这就是我们所说的移动应用程序的“渐进式披露”。
回答by WebDevBooster
To truncate the text in an HTML table, you first figure out what's the maximum width (in pixels) you can allow on small screens and then apply the text-truncateclass along with max-widthstyle like so:
要截断 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>To truncate automatically, based on the available space, you need to restructure the whole thing into a Bootstrap grid. Then you can use this:
要根据可用空间自动截断，您需要将整个事物重组为 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>回答by Alex
I tried next
我试了下
<td width="70%" class="text-truncate" style="max-width: calc( 70 * 1vw )">
It seems to be working.
它似乎正在工作。
