GitFOSS

import styled, { css } from "styled-components";

type TextEllipsisProps = {
  /** Number of lines before to cut text and show "...". Default to: 1 */
  numberOfLines?: number;
};

export const TextEllipsis = styled.span<TextEllipsisProps>`
  ${({ numberOfLines = 1 }) =>
    numberOfLines !== -1
      ? css`
          & {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-word;

            /** @thx https://stackoverflow.com/a/50566101/3855007 */
            @supports (-webkit-line-clamp: ${numberOfLines}) {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: initial;
              display: -webkit-box;
              -webkit-line-clamp: ${numberOfLines};
              -webkit-box-orient: vertical;
            }
          }
        `
      : css`
          word-break: break-word;
        `}
`;