[EuiBasicTable/Flex layouts] Support for multi line truncation.

[walterra]

At the moment EUI table columns support truncateText which works great for single lines. An additional option to support multi-line truncation would be great. There's some prior art spread across in Kibana with custom code which looks like there are use cases for both table columns and flex layouts.

Here's an example for custom code for a column's render function for EuiBasicTable using -webkit-line-clamp to achieve multi-line truncation.

    {
      field: 'myField',
      name:'My field',
      render: (value) => {
        return (
          <div
            css={css`
              display: -webkit-box;
              line-clamp: 3;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
            `}
          >
            {value}
          </div>
        );
      },
      truncateText: false,
      valign: 'middle',
    },

[1Copenut]

Thank you for the submission @walterra. The EUI team will triage this in our weekly Monday backlog meeting.

[cee-chen]

@walterra Just curious, any preference on the API/name? Here's what I currently have:

<EuiBasicTable
  columns={[
    {
      field: 'myField',
      name: 'My field',
      truncateText: { lines: 2 },
      valign: 'middle',
    }
  ]}
/>

For contrast, EuiDataGrid uses lineCount:

<EuiDataGrid
  rowHeightsOptions={{
    defaultHeight: { lineCount: 2 },
  }}
/>

[walterra]

Thanks for looking into this! Don't have a strong preference, but maybe good to keep in sync with data grid.