flex 单行省略号

import React from 'react';
import styled from 'styled-components';

const Group = styled.div`
  display: flex;
`;

const Item = styled.div`
  white-space: nowrap;
  overflow: hidden;

  &[data-ellipsis='false'] {
    flex: 1 0 auto;
  }
`;

const Ellipsis = styled.span`
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
`;

export default ({
  text_map = [
    { text: '11111111111111111111111', ellipsis: false },
    { text: '22222222222222222222222', ellipsis: true },
    { text: '33333333333333333333333', ellipsis: true },
  ],
} = {}) => {
  return (
    <Group>
      {text_map.map(({ text = '', ellipsis = false } = {}, key) => (
        <Item key={key} data-ellipsis={ellipsis}>
          {ellipsis ? <Ellipsis>{text}</Ellipsis> : text}
        </Item>
      ))}
    </Group>
  );
};