Bootstrap 3 Truncate Long Text Inside Rows of a Table in a Responsive Way

Bootstrap 3 truncate long text inside rows of a table in a responsive way

I did it this way (you need to add a class text to <td> and put the text between a <span>:

HTML

<td class="text"><span>looooooong tBootstrap 3 truncate long text inside rows of a table in a responsive way Bootstrap 3 truncate text in column on condensed table adding padding Bootstrap 4 truncate lonext</span></td>

SASS

.table td.text {
    max-width: 177px;
    span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
}

CSS equivalent

.table td.text {
    max-width: 177px;
}
.table td.text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

And it will still be mobile responsive (forget it with layout=fixed) and will keep the original behaviour.

PS: Of course 177px is a custom size (put whatever you need).

Bootstrap 3 truncate text in column on condensed table adding padding

display:inline-block on span causes white space to appear. Change it to display:block

/* CSS used here will be applied after bootstrap.css */
.table td.text {  max-width: 177px;}
.table td.text span {  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  display: block;  max-width: 100%;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><h2> Example no truncating</h2><div class="row">  <div class="col-md-10">    <table class="table table-striped table-bordered table-condensed">      <tbody>        <tr>          <td>            <span>              <a href="https://example.com">                Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.               </a>            </span>          </td>          <td class="text-right">            28/04/2017 04:10:02          </td>        </tr>      </tbody>    </table>  </div></div>
<h2> Example with truncating</h2><div class="row">  <div class="col-md-10">    <table class="table table-striped table-bordered table-condensed">      <tbody>        <tr>          <td class="text">            <span>              <a href="https://example.com">                Use Bootply to design, prototype, or test the Bootstrap framework. Find examples, share code and rapidly build interfaces for Bootstrap.               </a>            </span>          </td>          <td class="text-right">            28/04/2017 04:10:02          </td>        </tr>      </tbody>    </table>  </div></div>

Bootstrap 4 truncate long text inside a table in mobile devices

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.

How to work with ellipsis in bootstrap responsive table

The text-overflow property only affects content that is overflowing a
block container element in its inline progression direction
MDN

For text-overflow to work, specifying text-overflow: ellipsis alone will not do any good - you should use the following styles together:

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

span, div, th, td {  overflow: hidden;  white-space: nowrap;  text-overflow: ellipsis;  max-width: 100px;}

<span>Inline element overflow ellipsis do not work</span><div>Block elements overflow ellipsis works</div><table>  <tr><th>Table - Overflow test</th></tr>  <tr><td>This is a long text</td><td>This is a long text</td></tr></table>

text overflow control with CSS/Bootstrap table

Try adding overflow: hidden;, text-overflow: ellipsis;, and white-space: nowrap; to td.

bootstrap responsive table content wrapping

I ran across the same issue you did but the above answers did not solve my issue. The only way I was able to resolve it - was to make a class and use specific widths to trigger the wrapping for my specific use case. As an example, I provided a snippet below - but I found you will need to adjust it for the table in question - since I typically use multiple colspans depending on the layout. The reasoning I believe Bootstrap is failing - is because it removes the wrapping constraints to get a full table for the scrollbars. THe colspan must be tripping it up.

<style>
@media (max-width: 768px) { /* use the max to specify at each container level */
    .specifictd {    
        width:360px;  /* adjust to desired wrapping */
        display:table;
        white-space: pre-wrap; /* css-3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        word-wrap: break-word; /* Internet Explorer 5.5+ */
    }
}

I hope this helps

Break a table row into multiple line (responsive layout)

You could take a look at Responsive data tables. If that does not suit your needs, you could use JavaScript to re-create your table views as divs. This would be the easiest if you can get table data as JSON, which would be transformed into either tables or divs - depending on resolution. If you can't have it as JSON, you can always use jQuery's html() or text() to get the data from table cells and re-draw into divs.

---

Related Topics