If the word is too long then the word is out of column borders. How to avoid it?

minskster

Could you look at example? http://codepen.io/anon/pen/yypaav
The long word is going to next column. Is it possible to hide the part of the word and show "..." at the end if the word is too long?
Could you recommend another solution?

minskster

I have tried to apply workaround
<td style="max-width: 100px">
<span style=" text-overflow: ellipsis; break-word: break-word ; display: block; overflow: hidden">
but if the you set the very small screen the expanded table out of panel: http://codepen.io/anon/pen/VYyrwX

allan

Hi,

$('#example').addClass('no-wrap');

Should be:

 $('#example').addClass('nowrap');

http://codepen.io/anon/pen/ogppeK

Allan

minskster

Thanks Allan,

getting better but
1) if the screen size small then table out of border because the "Position" column has fixed size
2) if remove the <td style=... and click on + to expand the row then table out of border because the "Position" string is shown in one line fully.

allan

I've just updated the pen to use the latest versions of Bootstrap, DataTables, Responsive and the DataTables / Bootstrap integration.

With them it appears to work okay: http://codepen.io/anon/pen/LEewdK .

Note that I had to had nowrap CSS for the table as that isn't provided in Bootstrap.

Allan

minskster

Thanks Allan for this solution that helped me release in time! Write me if you need some help from me.