Support text overflow of narrow grid cells to use ellipsis

[jsakalos]

It can be easily seen on https://bryntum.com/examples/grid/basic/ by narrowing the first column.

The reason for this behavior is that we have text directly in the cell and the anonymous cell node cannot be addressed by CSS. However, it behaves as a flex item, therefore the text is vertically centered.

The problem can be solved at the cost of adding one wrapping <span> around the text:

    columns : [
        {
            text       : 'Name',
            htmlEncode : false,
            renderer({ value }) {
                return `<span class="b-cell-content">${value}</span>`;
            }

and css:

        .b-cell-content {
            text-overflow: ellipsis;
            overflow: hidden;
        }

TreeColumn (also in Gantt) and frameworks' renderers should be resolved too

[isglass]

Needs to be opt in to add that element, if it is not solvable without

[matsbryntse]

https://forum.bryntum.com/viewtopic.php?f=51&t=26756&p=133479#p133479

[ghulamghousdev]

+1 here https://forum.bryntum.com/viewtopic.php?p=148160#p148160