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

Question

I'm using bootstrap 3 tables, when i put large text in the table it gets wrapped on several lines, but i want it to be truncated with three dots at the end in a responsive way without messing up the layout of the table (i found some solutions but with unpleasant effects).

Is that possible ? how ?

PS: any solution is welcome, but i would like it to be just HTML/CSS if it's possible.

Answer 1

You need to use table-layout:fixed in order for CSS ellipsis to work on the table cells.

.table {   table-layout:fixed; }  .table td {   white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; } 

demo: http://bootply.com/9njmoY2CmS

Answer 2

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 teeeeeeeeext</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).