Implementing ellipsis overflow control on a column

akeni

Link to test case:
http://live.datatables.net/wakorivo/1/edit?html,css,js"live.datatables.net/wakorivo/1/")

Description of problem:
I want to implement the following feature into the datatable:

https://codepen.io/chriscoyier/pen/zqedEr?editors=1100

In the above example, there are two elements inline. I want to keep the second element (on the right from collapsing) and I want to collapse the first element (text)

However, after implementing the css and html elements, my column does not shrink to the appropiate length (column width remains static)

I believe the issue is that white-space: nowrap disallows the text to break into second line (what we want)

however, the width for collapsing the text (overflow control) is not working due to width properties for the TD element. What can I do?

kthorngren

See if the ellipsis renderer plugin will do what you want.

Kevin

akeni

I am looking for dynamic overflow reduction, whereas the plugin is a static text width control

kthorngren

Sorry I don't know enough about CSS to help but I tried your example without Datatables and it doesn't seem to apply the ellipsis. I would start by getting it working without Datatables. There may be others on the forum that can provide suggestions. Maybe post your non-Datatable version on Stack Overflow for with setting up your CSS and td structure.

Here is the example without Datatables.
https://datatables.net/plug-ins/dataRender/ellipsis

I think there are a couple typos in your example.

.span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.span is looking for the classname span not the element. Removing the . doesn't help.

You have <div="flex-child"> which I changed to <div class="flex-child"> which doesn't help either.

Kevin

akeni

http://live.datatables.net/wakorivo/5/edit?html,css,output

You're right the datatable had some typos. I have them corrected here.

I have listed a codepen example of what I'm trying to do and that works. That is exactly what I'm trying to achieve within a TD element.

akeni

After searching for a while, I've found a solution that will allow me to collapse text within a TD that is dynamically allocated width on window resizings.

https://codepen.io/akeni/pen/qBPNrzN