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