title: Bootstrap 4 truncate long text inside a table in mobile devices
body: <p>I'm creating a responsive table in order to use it both in Desktop and mobile devices.<br>
  The problem is that when the table loads long text it get truncated ruining the concept of 'responsive'.<br>
  I encountered into this problem only on the mobile platform, so here is a screenshot of the problem(if it can help...):<br>
  <a href="https://i.stack.imgur.com/vrUjul.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vrUjul.png" alt="enter image description here"></a></p>
  
  <p>What is the best way to fix this problem?
  I've tried many other tutorials but, unfortunately, no one has worked.</p>
  
  <p>-- EDIT --
  The HTML for the table:</p>
  
  <pre><code>&lt;table class="table table-hover table-dark"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th scope="col"&gt;Name&lt;/th&gt;
      &lt;th scope="col"&gt;Email&lt;/th&gt;
      &lt;th scope="col"&gt;Password&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    {{#each users}}
    &lt;tr&gt;
      &lt;th scope="row"&gt;{{name}}&lt;/th&gt;
      &lt;td class="text"&gt;&lt;span&gt;{{email}}&lt;/span&gt;&lt;/td&gt;
      &lt;td class="text"&gt;&lt;span&gt;{{password}}&lt;/span&gt;&lt;/td&gt;
    &lt;/tr&gt;
    {{/each}}
  &lt;/tbody&gt;
  </code></pre>
  
  <p></p>
  
  <p>I don't have any custom css, except the one for the background color.</p>