Html – Bootstrap 4 truncate long text inside a table in mobile devices

bootstrap-4csshtmlresponsive-designtwitter-bootstrap

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…):
enter image description here

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:

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

Best Answer

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-truncate class along with max-width style like so:

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

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

Related Topic