How to truncate lengthy text in a table on mobile screens using Bootstrap 4

I am currently working on a responsive table that needs to display correctly on both desktop and mobile devices. However, I have run into an issue where long text in the table gets truncated on mobile devices, compromising the responsiveness of the design. Here is a screenshot of the problem on mobile: https://i.sstatic.net/vrUjul.png

I have tried various solutions from different tutorials, but none have successfully resolved the issue. Can anyone suggest the best way to fix this problem?

-- EDIT -- The HTML code 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>

Currently, I am not using any custom CSS for the table, except for the background color.

Answer №1

To limit the text length within an HTML table, start by determining the maximum width suitable for small screens in pixels. Then, use the text-truncate class along with the max-width style attribute like this:

<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 automatically truncate text based on available space, you'll need to organize your content within a Bootstrap grid. Utilize the following approach:

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

Answer №2

I attempted the following

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

It appears to be functioning correctly.

Answer №3

Check out the layout of your phone's contacts app. What you'll see is that it displays only the names on each line in a condensed "index" view. To find out more information about a contact, users have to tap on the name to reveal additional details. This technique is known as "progressive disclosure" in the realm of mobile applications.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you identify the programming language used in this code snippet? - {"html":"<section class="page">

I've been approached to assist with a friend's company website since the original developer seems to have disappeared. Apologies if this question is too basic for this forum, and please forgive me if I am not in the right place to ask it. The m ...

Trigger the click event on the ul element instead of the li element using jQuery

Is there a way to make the click event only affect ul tags and not all li elements using jQuery? <!-- HTML --> <ul class="wrap"> <li>test1</li> <li>test2</li> <li>test3</li> </ul> I attemp ...

Generating an HTML hyperlink to trigger a button click event on another page

After implementing the code snippet below, I successfully managed to create a stylish Link with parameters that directs users to a specific page: <style> .fancy-link{ color: #FFFFFF; text-decoration: none; transition: ...

Adding and Removing Attributes from Elements in AngularJS: A Step-by-Step Guide

<input name="name" type="text" ng-model="numbers" mandatory> Is there a way to dynamically remove and add the "mandatory" class in Angular JS? Please note that "mandatory" is a custom class that I have implemented. Thank you. ...

What is the best way to animate images moving from the center to the left in HTML?

I've been pondering how to create a unique effect where images smoothly move from the center to the left, similar to what is showcased on this website: My attempts using the <marquee> tag have only resulted in images scrolling from right to lef ...

Test your knowledge of Javascript with this innerHtml quiz and see

How can I display the output of a score from a three button radio button quiz without using an alert popup? I want the output to be displayed within a modal for a cleaner look. I tried using InnerHTML but now there is no output when the button is clicked. ...

use ajax to dynamically append a dropdown menu

Currently working on creating a form that includes a dropdown menu populated with elements from a database. The challenge I'm facing is ensuring that once an element is selected from the dropdown, another one appears dynamically. My goal is to use AJA ...

When utilizing the "as" attribute, styled components do not inherit any styles

I am currently utilizing both styled-system and styled components, working on a simple scenario like the one below: const buttonFont = { fontFamily: "Chilanka" }; // define basic text styling const Text = styled.div` ${typography} ${color} `; // c ...

Can HTML code be saved in "context" and then utilized in one of the templates?

I am striving to extract the code of a table from another website using selenium, save it in the context dictionary, and then embed it into one of the templates so that it seamlessly becomes part of the page's HTML structure without displaying the cod ...

CSS Grid ensures uniformity in the spacing between columns

Is there a way to ensure the spacing between items is consistent? I attempted to use grid-column-gap, but the gap varies because the number of items on each row differs. The first and third rows have a larger gap compared to the second row, which has the ...

Issue with Vue2: encountering an error with the view-router component when attempting to utilize the <router-view> tag

Currently delving into Vue2 for the first time and facing hurdles with routes. Ever since I inserted <router-view></router-view> in index.html, an exception has been popping up: [Vue warn]: Failed to mount component: template or render functi ...

Experiencing problem with hover:after effect on Internet Explorer 8

I've been working on incorporating the CSS effect found on this website: Everything seems to be functioning properly except for the fix provided for IE8. I added some conditional code so that the fix is only applied to <= IE8, and as a result didn ...

What is the best way to transform URL images on a webpage into media library images in WordPress?

Having trouble converting HTML Static Sites to WordPress because images are hosted through HTML SRC Code. After conversion, no one can see the images in visual format on pages during editing. Is there a way to convert all image links inside pages to media ...

Is there a way to modify a button's aspect ratio when it is clicked?

Currently, I am utilizing the MUI v5 AppBar to craft a navigation bar with Tabs. My aim is to have the background of the Tab blend seamlessly with the main page background upon being clicked, as illustrated here: https://i.sstatic.net/e4bDn.png However, a ...

Unexpected resizing occurs when SVGs are nested within each other

I am experimenting with using nested inline SVGs to creatively position smaller svg images within an svg container. However, I am finding it challenging to grasp the guidelines for sizing nested SVG elements. svg { display: block; } Here is my query - ...

The Layout of Bootstrap4 Form is Displaying Incorrectly

I'm attempting to create a basic email form similar to the one shown in the Bootstrap 4 documentation. However, I am facing an issue where the formatting is not displaying correctly. Here is what the example should look like: https://i.sstatic.net/qx ...

Outline along a single edge

Is there a way to add an inset border to an HTML element on just one side, without using an image as a background? I've been stretching and positioning images for this purpose in the past, but I recently discovered the outline CSS property. However, i ...

What is the best way to add a right-hand side navigation bar without blocking the scrollbar from view?

Take a look at this webpage: I am designing a website that includes a header, a footer, and a central container with left and right navigation bars surrounding a content area. However, I want the scrollbar for the content to appear on the right side of th ...

How can I customize a CSS media class?

In my project, I am using a CSS library that includes the following class: @media only screen and (max-width: 480px) { .nav-tabs>li { margin-bottom:3px; } .nav-tabs>li, .nav-tabs>li>a { display:block !important; ...

Issues creating bar graphs using HTML

I am currently working on creating a script that can display statistics from a database in the form of a bar chart. My idea is to have two colored bars stacked on top of each other, representing different values simultaneously - for example, the number of ...