Bootstrap tables overflowing with long unspaced text

Question

I\'m using Bootstrap and I have a table with a few columns, the last of which sometimes has a long piece of text without spaces. I noticed that under certain screen sizes, t

Answer 1

I was having trouble with these solutions working in Internet Explorer.

I used the following style to get it to finally work.

<td style="word-break: break-all">

Answer 2

.the-table {
    table-layout: fixed;
    word-wrap: break-word;
}

Deprecated (i.e. word-wrap)

Add the following styles to your <table>

.the-table {
    table-layout: fixed;
    over-flow: break-word;
}

Then you can adjust your layout via-CSS as you wish.

Answer 3

You can use below css. This will wrap the text and apply ... in the end of the text.

e.g. This_is_a_large_text will be changed to This_is_a_lar...

td {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

You can also add tool tip to show the complete text value.

<td data-toggle="tooltip" title="${text}">${text}</td>

Answer 4

Albers answer did the trick for me

.the-table {
 table-layout: fixed;
 word-wrap: break-word;
}

In the JS to load it dynamically add

 $("#"  + tableName ).addClass('the-table'); 

Hope it helps!!

Answer 5

This works without forcing table layout to be fixed Just add it to td or any

.is-breakable {
  word-break: break-word;
}